帮你轻松搞定React路由

React路由

这里主要向大家介绍5点，都是我觉得很重要的，不足之处，请多指正！！

1.每层路由都可以在最后写Redirect

下面这个一级路由，你在浏览器随便输入什么地址，只要不是以下三个，都会最终匹配到Redirect里的路径

<Switch>
    <Route path='/home' component={Home}></Route>
    <Route path='/about' component={About}></Route>
    <Route path='/vs' component={Vs}></Route>
    //一级路由若没有匹配到，就匹配到/home
    <Redirect to='/home'></Redirect>/
</Switch>

至于为什么匹配到Home1，是因为进入Home组件，二级路由会再次重复Redirect

2.路由是嵌套的，嵌套意味着当前这一层的路由匹配成功后，会保证页面显示上一层的路由对应的的页面，假如demo里路由的嵌套是

一级路由：

//App.js

<Switch>
    <Route path='/home' component={Home}></Route>
    <Route path='/about' component={About}></Route>
    <Route path='/vs' component={Vs}></Route>
    //一级路由若没有匹配到，就匹配到/home
    <Redirect to='/home'></Redirect>/
</Switch>

二级路由：

//Home.js

  <Switch>
    <Route path='/home/home1' component={Home1}/>
    <Route path='/home/home2' component={Home2}/>
    <Route path='/home/home3' component={Home3}/>
    <Redirect to='/home/home1'></Redirect>
</Switch>

//About.js

 <Switch>
    <Route path='/about/about1' component={About1}></Route>
    <Route path='/about/about2' component={About2}></Route>
    <Route path='/about/about3' component={About3}></Route>
    <Redirect to='/about/about2'></Redirect>
</Switch>

//Vs.js
 
 <Switch>
    <Route path='/vs/vs1' component={Vs1}></Route>
    <Route path='/vs/vs2' component={Vs2}></Route>
    <Route path='/vs/vs3' component={Vs3}></Route>
    <Redirect to='/vs/vs3'></Redirect>
</Switch>

三级路由(这里只写了一个):

//vs3.js

<ul className="list-group list-group-flush">
    <Link to={`/vs/vs3/1` } key={1} className='list-group-item'>text</Link>
    <Link to={`/vs/vs3/2` } key={2} className='list-group-item'>text</Link>
    <Link to={`/vs/vs3/3` } key={3} className='list-group-item'>text</Link>
</ul>

<Switch>
        <Route path="/vs/vs3/:id" component={Vsdetail}></Route>
</Switch>

三级路由指向的组件：

//Vsdetail.jsx
 
 render() {
    const id = this.props.match.params.id
    return (
        <ul className="list-group">
            <li className="list-group-item">{id}</li>
            <li className="list-group-item">{id}</li>
            <li className="list-group-item">{id}</li>
        </ul>
    )
}

浏览器输入地址后:

这就是开头所说的意思，当path=’/vs/vs3/1’的时候，浏览器不仅仅显示

<Route path="/vs/vs3/:id" component={Vsdetail}></Route>

 <Route path='/vs' component={Vs}></Route>
 <Route path='/vs/vs3' component={Vs3}></Route>

所对应的组件，对应的组件也会显示，下面的这张图的观点就是这个意思：

3.bug分析

浏览器地址输入：http://localhost:3000/home，匹配到Home组件，

//App.js

<Switch>
    <Route exact={true} path='/home' component={Home}></Route>
    <Route path='/about' component={About}></Route>
    <Route path='/vs' component={Vs}></Route>
    <Redirect to='/home'></Redirect>/
</Switch>

//Home.js
 
 <Switch>
    <Route path='/home/home1' component={Home1}/>
    <Route path='/home/home2' component={Home2}/>
    <Route path='/home/home3' component={Home3}/>
    <Redirect to='/home/home1'></Redirect>
</Switch>

此时会报错：

原因是：App.js里面 Home所在的路由是精准匹配，只有path=’/home’可以匹配，此时路由地址是 '/home/home1’是不能正常显示Home组件的，解决办法：将exact={true}删除

4.浏览器地址没有写路由，此时一级路由代码是：

<Switch>
    <Route path='/home' component={Home}></Route>
    <Route path='/about' component={About}></Route>
    <Route path='/vs' component={Vs}></Route>
</Switch>

pathname此时是’/’

5.因为路由是嵌套的，所以当你扔一串路由地址(也就是path=’/xx/xx/xxxx…)，这时候执行起来，就像在一个路口，先匹配一级路由，匹配成功，好的，显示对应页面，然后进一步，匹配二级路由，以此类推，比如，path="/233’,会走入这样的流程：

显示页面

比如:path=’/home/22’，匹配一级路由成功，进入Home，由于/22无法匹配，被重定向到Home1，和上面结果一致，

再来:

这种情况下，路由不匹配，由于/vs匹配成功，/vs/v1233没有匹配成功，并且这一级没有写Redirect，所以要看上一级路由是怎么写的

此时会

所以写嵌套路由的时候，要把上级路由的名字写准确，不然这级路由没法处理