通过一个用户管理实例学习react-router-dom

一个新手 2017-10-12 09:34 1608浏览原创

我们通过一个用户管理实例来学习react-router-dom

这个实例包括9个小组件

App.js 引入组件

Home.js 首页组件

User.js 用户管理组件

- UserList.js 用户列表组件

- UserAdd.js 用户添加组件

- UserDetail.js 用户详情组件

Profile.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:'red'}        return (            <router>
                <p>
                    <nav>
                        <p>
                            <a>用户管理</a>
                        </p>
                        <ul>
                            <li><navlink>首页</navlink></li>
                            <li><navlink>用户管理</navlink></li>
                            <li><navlink>个人中心</navlink></li>
                        </ul>
                    </nav>
                    </p>
<p>
                        {/*Switch是匹配*/}
                        {/*exact 我们匹配/斜杠时候，就匹配第一个*/}                        <switch>
                        <route></route>
                        <route></route>
                            <protected></protected>
                            <route></route>

                        </switch>
                    </p>
                
            </router>        )
    }
}

App组件使我们引入的组件，在这个组件里面，我们需要注意到最外层的Router

这个是路由容器，我们路由规则Route需要包裹在日期里面

Route包含了两个属性，path 和 component

path指向的路由路径，component指向的是要跳转的组件

我们路由导航，一般是Link和NavLink两个

这两个功能一样，都是路由跳转，但是NavLink有一个属性用来显示跳转选中的样式，activeStyle属性，写显示高亮样式的，接收一个对象{}

在我们路由导航有一个to属性

to属性是我们路由的要跳转的路径

下面是User.js 组件，主要包含两个路由NavLink和Route，和上面一个意思，切换两个组件NavLink和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:'red'}        return (            <p>
                </p><p>
                    <nav>
                        <ul>
                            <li><navlink>用户列表</navlink></li>
                            <li><navlink>添加用户</navlink></li>
                        </ul>
                    </nav>
                </p>
                <p>
                    <route></route>
                    <route></route>
                    <route></route>
                </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 (

) } }

我们将用户添进去的数据，在页面缓存，方便我们用户列表页渲染

<span style="font-size: 14pt;">localStorage.setItem('USERS',JSON.stringify(users));</span><br><span style="font-size: 14pt;">缓存完成后跳转到列表详情页面userList</span><br><span style="font-size: 14pt;">this.props.history.push('/user/list')</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 (

用户名: {user.username} { let users=this.state.users.filter(item=>item.id!=user.id) this.setState({users}); }}>删除

) } }

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 (

ID	用户名	密码
{user.id}	{user.username}	{user.password}

) } }

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 'react-router-dom';//函数组件//把属性对象中的Component属性取出来赋给comp,把其它属性取出来赋给other对象//再把other对象的全部属性取出来赋给Route// component=组件// render函数 当路由匹配的时候，渲染的是render方法的返回值export default function ({component: _comp, ...rest}) {    return <route> localStorage.getItem('login') ? <_comp></_comp> :
            <redirect></redirect>
    }/>    return null;
}</route>

如果没有登录，我们就进入登录组件，其实我们模拟登录就是设置了一个缓存login为true，模拟权限，真实项目中，我们通过后台接口来限制，路由跳转

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>登录                
                    </button>
            </p>        
            )
    }
}

后面，我们首页Hone和Profile两个组件，基本就是展示个人信息的，就是渲染，所以我就没有必要写了！

总体完成，路由嵌套路由，然后通过路由参数分辨路由不同的信息