Heim > Web-Frontend > js-Tutorial > Hauptteil

Lernen Sie React-Router-Dom anhand eines Benutzerverwaltungsbeispiels kennen

一个新手
Freigeben: 2017-10-12 09:34:49
Original
1549 Leute haben es durchsucht

Wir lernen React-Router-Dom anhand eines Benutzerverwaltungsbeispiels

Dieses Beispiel enthält 9 kleine Komponenten

App. js führt Komponenten ein

Home.js-Homepage-Komponente

User.js-Benutzerverwaltungskomponente

- UserList.js Benutzerlistenkomponente

- UserAdd.js Benutzerhinzufügenkomponente

- UserDetail.js Benutzerdetailskomponente

Profile.js Personal Center-Komponente

Login.js Benutzeranmeldekomponente

Protected.js verwaltet die Anmeldekomponente ( wir simulieren die Anmeldung)

Wir erstellen zunächst eine App-Komponente als eine in unserem Projekt eingeführte Komponente

import React, {Component} from 'react';//Router 容器,它是用来包裹路由规则的//Route 是路由规则//BrowserRouter基于h5的。兼容性不好//引入react-router-demoimport {HashRouter as Router, Route,Link,NavLink,Switch} from 'react-router-dom';//引入我们需要的组件import Home from "./Home";
import User from "./User";
import Profile from "./Profile";
import Login from "./Login";
import Protected from './Protected'//定义一个App组件export default class App extends Component {
    render() {        //定义一个我们选中的状态
        let activeStyle={color:&#39;red&#39;}        return (            <Router>
                <p className="container">
                    <nav className=&#39;nav navbar-default&#39;>
                        <p className="container-fluid">
                            <a className="navbar-brand">用户管理</a>
                        </p>
                        <ul className="nav">
                            <li className=&#39;navbar-nav&#39;><NavLink exact activeStyle={activeStyle} to="/">首页</NavLink></li>
                            <li className=&#39;navbar-nav&#39;><NavLink activeStyle={activeStyle} to="/user">用户管理</NavLink></li>
                            <li className=&#39;navbar-nav&#39;><NavLink activeStyle={activeStyle} to="/profile">个人中心</NavLink></li>
                        </ul>
                    </nav>
                    <p>
                        {/*Switch是匹配*/}
                        {/*exact 我们匹配/斜杠时候,就匹配第一个*/}                        <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/user" component={User}/>
                            <Protected path="/profile" component={Profile}/>
                            <Route path="/login" component={Login}/>

                        </Switch>
                    </p>
                </p>
            </Router>        )
    }
}
Nach dem Login kopieren

App-Komponente Lassen Sie uns die Komponente vorstellen . In dieser Komponente müssen wir auf den äußersten Router achten

Dies ist der Routing-Container, der in das Datum eingebunden werden muss

Route enthält zwei Attribute, Pfad und Komponente

Pfad zeigt auf den Routing-Pfad und Komponente zeigt auf die zu überspringende Komponente

Unsere Routennavigation ist im Allgemeinen Link und NavLink

Diese beiden Funktionen sind gleich, es handelt sich um Routensprünge , aber NavLink verfügt über ein Attribut , das zum Anzeigen des ausgewählten Sprungstils verwendet wird. Das Attribut activeStyle, das zum Anzeigen des hervorgehobenen Stils geschrieben wird, empfängt ein Objekt {}

In unserer Route Navigation gibt es ein to-Attribut

to-Attribut ist der Pfad, der auf unserer Route übersprungen werden soll

Das Folgende ist die User.js-Komponente, die hauptsächlich zwei Routen enthält, NavLink und Route. Es hat die gleiche Bedeutung wie oben, vertauschen Sie die beiden Komponenten NavLink und Route

import React, {Component} from &#39;react&#39;import {Link,Route,NavLink} from &#39;react-router-dom&#39;import UsersList from &#39;./UsersList&#39;import UsersAdd from &#39;./UsersAdd&#39;import UserDetail from "./UserDetail";
export default class User extends Component {
    render() {
        let activeStyle={color:&#39;red&#39;}        return (            <p className=&#39;row&#39;>
                <p className="col-sm-3">
                    <nav>
                        <ul className="nav nav-stacked">
                            <li><NavLink activeStyle={activeStyle} to="/user/list">用户列表</NavLink></li>
                            <li><NavLink activeStyle={activeStyle} to="/user/add">添加用户</NavLink></li>
                        </ul>
                    </nav>
                </p>
                <p className="col-sm-9">
                    <Route path="/user/list" component={UsersList}></Route>
                    <Route path="/user/add" component={UsersAdd}></Route>
                    <Route path="/user/detail/:id" component={UserDetail}></Route>
                </p>
            </p>        )
    }
}
Nach dem Login kopieren

– UserAdd.js vom Benutzer hinzugefügte Komponente

import React, {Component} from &#39;react&#39;export default class UsersAdd extends Component {
    handleSubmit=()=>{
        let username=this.refs.username.value;
        let password=this.refs.password.value;
        let user={username,password,id:Date.now()};
        let users=JSON.parse(localStorage.getItem(&#39;USERS&#39;)||"[]");
        users.push(user);
        localStorage.setItem(&#39;USERS&#39;,JSON.stringify(users));        this.props.history.push(&#39;/user/list&#39;)
    }
    render() {        /*
        * history 用来跳转页面
        * location.pathname 用来存放当前路径
        * match代表匹配的结果
        *
        * */
        return (            <form onSubmit={this.handleSubmit}>
                <p className="form-group">
                    <label htmlFor="username" className="control-label">
                        用户名                    </label>
                    <input type="text" className="form-control" ref="username" placeholder="用户名"/>
                </p>
                <p className="form-group">
                    <label htmlFor="username" className="control-label">
                        密码                    </label>
                    <input type="password" className="form-control" ref="password" placeholder="密码"/>
                </p>
                <p className="form-group">

                    <input type="submit" className="btn btn-danger" />
                </p>
            </form>        )
    }
}
Nach dem Login kopieren

Wir speichern die vom Benutzer auf der Seite hinzugefügten Daten zwischen, um die Darstellung unserer Benutzerliste zu erleichtern Seite

<span style="font-size: 14pt;">localStorage.setItem(&#39;USERS&#39;,JSON.stringify(users));</span><br/><span style="font-size: 14pt;">缓存完成后跳转到列表详情页面userList</span><br/><span style="font-size: 14pt;">this.props.history.push(&#39;/user/list&#39;)</span>
Nach dem Login kopieren

- UserList.js Benutzerlistenkomponente

import React, {Component} from &#39;react&#39;import {Link} from &#39;react-router-dom&#39;export default class UsersList extends Component {
    constructor(){
        super();        
        this.state={users:[]}
    }
    componentWillMount(){
        let users = JSON.parse(localStorage.getItem(&#39;USERS&#39;) || "[]");        
        this.setState({users});
    }
    render(){        
    return (           
    <ul className="list-group">
               {                   
                       this.state.users.map((user,index)=>(                       
                       <li key={index} className="list-group-item">
                           <span>用户名:</span>
                           <Link to={`/user/detail/${user.id}`}>{user.username}</Link>
                          <span className="btn btn-danger" onClick={()=>{
                              let users=this.state.users.filter(item=>item.id!=user.id)                              this.setState({users});
                          }}>删除</span>
                       </li>                   ))
               }           </ul>        )
    }
}
Nach dem Login kopieren

componentWillMount() ist die Komponentenzyklusfunktion nach der Komponente mounted

In dieser Hook-Funktion gehen wir zu den USERS-Daten, die in userAdd gespeichert sind, und rendern sie dann auf der Seite
{user.username}

Hier springen wir zu den persönlichen Datendetails und bringen alle Benutzer id

Dann ist unsere Benutzerdetailseite UserDetail.js-Komponente

import React, {Component} from &#39;react&#39;export default class UserDetail extends Component {
    render() {        // let user=this.props.location.state.user
        let users = JSON.parse(localStorage.getItem(&#39;USERS&#39;)||"[]");
        let id = this.props.match.params.id;
        let user = users.find(item=>item.id == id);        
        return (            
        <table className="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>{user.id}</td>
                    <td>{user.username}</td>
                    <td>{user.password}</td>
                    </tr>
                </tbody>
            </table>        )
    }
}
Nach dem Login kopieren

let id = this.props.match.params.id;

let user = users.find(item=>item.id == id);

Rufen Sie die von der Route mitgebrachte ID ab durch Übereinstimmung

Dann das Element mit derselben ID in den Benutzern ermitteln

und es dann auf der Seite rendern

, dann ermitteln wir den Login. Wenn Sie nicht angemeldet sind, melden Sie sich an. Erst nach dem Anmelden können wir die Benutzerverwaltung sehen.

import React from &#39;react&#39;;
import {Route, Redirect} from &#39;react-router-dom&#39;;//函数组件//把属性对象中的Component属性取出来赋给comp,把其它属性取出来赋给other对象//再把other对象的全部属性取出来赋给Route// component=组件// render函数 当路由匹配的时候,渲染的是render方法的返回值export default function ({component: _comp, ...rest}) {    return <Route {...rest} render={
        props => localStorage.getItem(&#39;login&#39;) ? <_comp/> :
            <Redirect to={{pathname: &#39;/login&#39;, state: {from: props.location.pathname}}}/>
    }/>    return null;
}
Nach dem Login kopieren

Wenn Sie nicht angemeldet sind, werden wir eingegeben Tatsächlich simulieren wir die Anmeldung und richten sie ein. In einem echten Projekt verwenden wir die Backend-Schnittstelle, um Routing-Sprünge zu begrenzen. Unsere Homepage-Komponenten Hone und Profile zeigen im Grunde persönliche Informationen an. Es handelt sich lediglich um eine Darstellung, sodass ich sie nicht schreiben muss!

import React, {Component} from &#39;react&#39;;
export default class Login extends Component {
    handleClick = ()=>{
        localStorage.setItem(&#39;login&#39;,&#39;true&#39;);
        console.log(this.props);        
        this.props.history.push(this.props.location.state.from);
    }
    render() {        
    return (            
    <p>
                   <button
                    onClick={this.handleClick}
                    className="btn btn-primary">登录                
                    </button>
            </p>        
            )
    }
}
Nach dem Login kopieren
Im Großen und Ganzen wird das Routing in Routing verschachtelt und dann werden verschiedene Routing-Informationen durch Routing-Parameter unterschieden

Das obige ist der detaillierte Inhalt vonLernen Sie React-Router-Dom anhand eines Benutzerverwaltungsbeispiels kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage