每天学点React - Switch、exact、Redirect

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情

前言

前面介绍了路由的基础使用，但是在使用的过程中还是有不少问题的，例如：多组件同路由匹配、没有默认兜底路由、模糊路径匹配等等场景。

Switch的使用

基本用法

该组件只需要在Route标签的外层包裹上即可实现效果。

<Switch>
    <Route path='/a' component={A}></Route>
    <Route path='/b' component={B}></Route>
    <Route path='/c' component={C}></Route>
</Switch>

我们可以对比看看未加Switch标签与加上的区别：

未加

<Route path='/a' component={A}></Route>
<Route path='/b' component={B}></Route>
<Route path='/b' component={A}></Route>

已加

<Switch>
    <Route path='/a' component={A}></Route>
    <Route path='/b' component={B}></Route>
    <Route path='/b' component={A}></Route>
</Switch>

小结

通常情况下，path和component是一一对应的关系
Switch可以提高路由匹配效率（单一匹配）

Route组件exact属性

通过设置Route组件的exact属性，我们可以开启严格模式(默认开启的是模糊匹配)，控制路由路径必须严格匹配。

基本用法

<Route exact={true} path='/a' component={A}></Route>

案例演示

export default class App extends Component {
    render() {
        return (
            <div id='root'>
                <div>
                    <div className='row'>
                        <div className='col-xs-offset-2 col-xs-8'>
                            <Header></Header>
                        </div>
                    </div>
                    <div className='row'>
                        <div className='col-xs-2 col-xs-offset-2'>
                            <div className='list-group'>
                                {/* 自定义路径标签，可以便于统一样式 */}
                                <MyNavLink to='/a/aaa'>A</MyNavLink>
                                <MyNavLink to='/b/bbb'>B</MyNavLink>
                            </div>
                        </div>
                        <div className='col-xs-6'>
                            <div className='panel'>
                                <div className='panel-body'>
                                    <Switch>
                                        {/* 未开启严格模式 */}
                                        <Route path='/a' component={About}></Route>
                                        {/* 开启严格模式 */}
                                        <Route exact path='/b' component={Home}></Route>
                                    </Switch>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

未开启严格模式

已开启严格模式

小结

默认使用的是模糊匹配（【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：<Route exact={true} path="/xxx" component={Xxx}/>
严格匹配不要随便开启，需要再开，有些时候会导致无法继续匹配二级路由

Redirect

基本用法

只需要在所有Route组件的下方定义上该组件，并配置默认跳转路径即可。

<Switch>
    <Route path='/a' component={A}></Route>
    <Route path='/b' component={B}></Route>
    <Redirect to='/a'/>
</Switch>

未加效果

未指定时，会停留在http://localhost:3000这里

已加效果

指定了默认兜底的路由之后，访问http://localhost:3000则会指向http://localhost:3000/a这路径下

小结

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
具体编码：

<Switch>
    <Route path='/a' component={A}></Route>
    <Route path='/b' component={B}></Route>
    <Redirect to='/a'/>
</Switch>