React从0开始：React Router(二)

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

上一篇文章我们学习了React Router的BrowserRouter、Link、Route、Switch的使用方法以及exact对精确路由的注意事项，还了解了基本的三种路由传参方法，分别是：

• params方法：Route组件中path="/user/:id" + 路由后组件this.props.match.params.id
• query方法：函数内this.props.history.push({pathname:'/user',query:{id:1}})+ 路由后组件this.props.location.query.id
• state方法：Link组件中to={ {pathname:"/user",state:{id:1}} } + 路由后组件this.props.location.state.id

今天我们则来学习React Router的一些其他知识

一、React Router的重定向Redirect

在我们写页面的时候会用到重定向，重定向和路由是不太一样的，使用Redirect的重定向页面跳转后无法返回上一页，这就可以用到一些有这方面需求的场景上了（我个人理解可以用到退出登录上，退出登录后重定向页面至首页）

import { Redirect } from 'react-router-dom';
return (
    <div>
        {
            isLogin ? null : <Redirect to="/">
        }
    </div>
)

另外，我们也可以为重定向页面传参，方法同上文state方法：

import { Redirect } from 'react-router-dom';
return (
    <div>
        {
            isLogin ? null : <Redirect to={ { pathname:'/', state:{id:null} } } >
        }
    </div>
)

二、页面404显示方法

页面如果404，也就是进入了一个没有的路由，那么我们可以通过Route的component属性传入404组件，下面的*号代表除/和/user之外的路由均与该Route匹配，最终跳转到NoMatch组件

import NoMatch from './NoMatch'
<Route path="/" component={Home} />
<Route path="/user" component={User} />
<Route path="*" component={NoMatch} />
或
<Route path="*">
    <NoMatch />
</Route>

三、自定义路由跳转

在选择路由方面，我们可以通过条件去选择这条路由该去渲染哪些组件，最常见的就是权限的判断，在路由跳转前判断是否登录，登录了则跳转到有权限的页面，没有登录则跳转到登录组件

import User from './User';
import ToLogin from './ToLogin';
...
<Route path="/user">
    {
        isLogin ? (
            <User />
        ) : (
            <ToLogin />
        )
    }
</Route>

在我们访问/user路由后匹配到我们配置的Route以后，会判断isLogin，也就是一种判断是否登录的标志，如果已登录则渲染User组件，否则渲染Login组件。