React又见路由之重定向路由

我们开发时有这么一个需求，就是在跳转个人详情，点击收藏等功能时，一定要先校验一下是否登录，如果登录再跳转个人详情等界面。那么就要在路由这一块做一下手脚

我们下面的代码要做的事是，点击详情，如果已经登录就进入详情，如果没登录，就进入登录界面

一、我们先写一个登录界面吧

import React from 'react';
import HeaderComponent from '../common/header';
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nickName: "",
            uid: 0
        }
    }
    render() {
        return (
            <div>
                <HeaderComponent/>
                用户ID:{this.state.uid}<br/>
                昵称:{this.state.nickName}<br/>
                <input onChange={(e) => {
                    console.log(e.target.value);
                    this.setState({
                        nickName: e.target.value
                    })
                }}/>
                <br/>
                <button onClick={this.toLogin.bind(this)}>登录</button>
                <button onClick={this.loginOut.bind(this)}>退出登录</button>
            </div>
        )
    }
    /**
     * 点击登录
     */
    toLogin() {
        /**
         * localStorage是一个储存本地的一个功能，储存的东西没有时间限制，但是储存的值的数据类型都是字符串类型
         * 可以通过按F12，然后点击Application,然后选择Storage/Local Storage下的http对应的网页查看
         */
        localStorage['isLogin'] = true;
        localStorage['nickName'] = this.state.nickName;
    }
    /**
     * 退出登录
     */
    loginOut() {
        //移除本地储存的值
        localStorage.removeItem("isLogin");
        localStorage.removeItem("nickName");
    }
}

二、然后我们写一个自定义的路由，以后所有的都可以按照这个格式来，只需要修改下面关键几行代码就行

import React from 'react';
import {Redirect, Route} from 'react-router-dom';
const PrivateRoute = ({component: Component, ...rest}) => (
    <Route
        {...rest}
        render={props =>
            /**
             * 关键修改代码 localStorage['isLogin']，这个是我们本地的储存的值，在登录界面储存的
             * 因为localStorage储存的值都是以字符串储存的，所以我们要先转成boolean值
             * 如果是true，则进入正常界面，如果不是则进入登录界面
             */

            Boolean(localStorage['isLogin']) ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{
                        /**
                         * 关键代码
                         *  这是我们的登录路由
                         */
                        pathname: "/login",
                        state: {from: props.location}
                    }}
                />
            )
        }
    />
);
export {
    PrivateRoute
}

三、最后使用我们自定义的路由
在路由界面注册登录和商品详情界面，商品详情的界面在这篇博客里点击进入商品详情的界面代码

//这里使用我们自定义的路由
<PrivateRoute path="/goods" component={GoodsIndex}/>
 <Route path="/login" component={Login}/>