ユーザー管理の例を通じて、react-router-dom を学習する

ユーザー管理の例を通して、react-router-dom を学びます

この例には、9 つ​​の小さなコンポーネントが含まれています

App.js 導入コンポーネント

Home.js ホームページコンポーネント

ユーザー。管理コンポーネント

- UserList.js ユーザーリストコンポーネント

- UserAdd.js ユーザー追加コンポーネント

- UserDetail.js ユーザー詳細コンポーネント

Profile.js パーソナルセンターコンポーネント

ログイン.js ユーザーログインコンポーネント

Protected.js ログインを処理するコンポーネント (ログインをシミュレートします)

まず、プロジェクトに導入されるコンポーネントとして App コンポーネントを構築します

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

App コンポーネントにより、導入が可能になりますコンポーネント、このコンポーネントでは、最も外側の Router に注意する必要があります

これはルーティング コンテナであり、ルーティング ルールです。Route は日付でラップする必要があります

Route には、パスとコンポーネントの 2 つの属性が含まれています

path はルーティング パスを指し、component はジャンプするコンポーネントを指します。

これら 2 つの関数は通常、Link と NavLink であり、どちらもルーティング Jump です。 ただし、NavLink には、ジャンプによって選択されたスタイルを表示するために使用される属性

と、強調表示されたスタイルを表示するために記述された activeStyle 属性があり、オブジェクトを受け取ります。{}

ルート ナビゲーションには、

to

Attributeto 属性はルートにジャンプするためのパスです

以下は User.js コンポーネントで、主に NavLink と Route の 2 つのルートが含まれています。上記では、NavLink と Route の 2 つのコンポーネントを切り替えています

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

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

ユーザー リスト ページのレンダリングを容易にするために、ユーザーがページに追加したデータをキャッシュします

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

- 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() は、コンポーネントがマウントされた後のコンポーネント サイクル関数です

このフック関数では、userAdd に保存されている USERS データに移動し、それをページ

{user.username}

ここで個人情報の詳細にジャンプし、全員のユーザー ID

次に、ユーザー詳細ページ 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);

match を通じてルートによってもたらされた ID を取得します

次に、users 内で同じ ID を持つアイテムを特定します

それをページにレンダリングします

、そして次に、ログインを決定します。ログインがない場合は、ログインするだけです。ログイン後にのみユーザー管理が表示されます

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

ログインしていない場合は、実際にシミュレーションするときにログインコンポーネントに入ります。実際のプロジェクトでは、バックグラウンド インターフェイスを使用して、制限、ルート ジャンプを実行します

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

ホームページの Hone コンポーネントと Profile コンポーネントは、基本的に個人情報を表示するために使用されます。レンダリングするので、記述する必要はありません。 全体的に完了し、ルーティングがネストされ、ルーティングパラメータを通じて異なるルーティング情報が区別されます

以上がユーザー管理の例を通じて、react-router-dom を学習するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。