Apprenez à réagir-router-dom à travers un exemple de gestion des utilisateurs

Nous apprenons React-Router-dom à travers un exemple de gestion des utilisateurs

Cet exemple comprend 9 petits composants

App. js introduit des composants

Composant de page d'accueil Home.js

Composant de gestion des utilisateurs User.js

- Composant de liste d'utilisateurs UserList.js

- Composant d'ajout d'utilisateur UserAdd.js

- Composant de détails utilisateur UserDetail.js

Composant du centre personnel Profile.js

Composant de connexion utilisateur Login.js

Protected.js gère le composant de connexion ( nous simulons la connexion)

Nous créons d'abord un composant App en tant que composant introduit dans notre projet

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>        )
    }
}

Composant App Introduisons le composant . Dans ce composant, nous devons faire attention au routeur le plus externe

Il s'agit du conteneur de routage. Notre règle de routage doit être enveloppée dans la date

.

La route contient deux attributs, le chemin et le composant

le chemin pointe vers le chemin de routage et le composant pointe vers le composant à sauter

Notre navigation d'itinéraire est généralement Link et NavLink

Ces deux fonctions sont les mêmes, ce sont des sauts d'itinéraire , mais NavLink a un attribut utilisé pour afficher le style de saut sélectionné, l'attribut activeStyle, qui est écrit pour afficher le style en surbrillance, reçoit un objet {}

Dans notre itinéraire navigation, il y a un à attribut

à attribuer est le chemin à parcourir dans notre itinéraire

Ce qui suit est le composant User.js, qui comprend principalement deux itinéraires, NavLink et Route. Il a la même signification que ci-dessus, permutez les deux composants NavLink et Route

.

import React, {Component} from 'react'import {Link,Route,NavLink} from 'react-router-dom'import UsersList from './UsersList'import UsersAdd from './UsersAdd'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>        )
    }
}

- Composant ajouté par l'utilisateur UserAdd.js

import React, {Component} from 'react'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('USERS')||"[]");
        users.push(user);
        localStorage.setItem('USERS',JSON.stringify(users));        this.props.history.push('/user/list')
    }
    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>        )
    }
}

Nous mettons en cache les données ajoutées par l'utilisateur sur la page pour faciliter le rendu de notre liste d'utilisateurs page

<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>

- Composant de liste d'utilisateurs UserList.js

import React, {Component} from 'react'import {Link} from 'react-router-dom'export default class UsersList extends Component {
    constructor(){
        super();        
        this.state={users:[]}
    }
    componentWillMount(){
        let users = JSON.parse(localStorage.getItem('USERS') || "[]");        
        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>        )
    }
}

componentWillMount() est la fonction de cycle de composant une fois le composant monté

Dans cette fonction de hook, nous accédons aux données UTILISATEURS stockées dans userAdd, puis les rendons à la page
{user.username}

Ici, nous passons aux détails des informations personnelles et amenons l'utilisateur de chacun id

Ensuite, notre page de détails utilisateur Composant UserDetail.js

import React, {Component} from 'react'export default class UserDetail extends Component {
    render() {        // let user=this.props.location.state.user
        let users = JSON.parse(localStorage.getItem('USERS')||"[]");
        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>        )
    }
}

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

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

Obtenir l'identifiant apporté par l'itinéraire via la correspondance

Ensuite, déterminez l'élément avec le même identifiant chez les utilisateurs

, puis affichez-le sur la page

, puis nous déterminons la connexion. Si vous n'êtes pas connecté, connectez-vous. Ce n'est qu'après la connexion que nous pourrons voir la gestion des utilisateurs

import React from 'react';
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;
}

Si nous ne sommes pas connectés, nous entrerons le composant de connexion. En fait, nous simulons la connexion et la mettons en place. Une connexion en cache est vraie, simulant les autorisations. Dans un projet réel, nous utilisons l'interface backend pour limiter les sauts de routage

import React, {Component} from 'react';
export default class Login extends Component {
    handleClick = ()=>{
        localStorage.setItem('login','true');
        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>        
            )
    }
}

. nos composants Hone et Profile de notre page d'accueil affichent essentiellement des informations personnelles. Il s'agit simplement d'un rendu, donc je n'ai pas besoin de les écrire !

Globalement terminé, le routage est imbriqué dans le routage, puis différentes informations de routage sont distinguées grâce aux paramètres de routage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!