关于React router 使用

2020-04-08  本文已影响0人  2c4419e9dafa
<div>
    <ul>
        <li>
            <Link to={this.fatherPath + "/aaa"}>aaa</Link>
        </li>
        <li>
            <Link to={this.fatherPath + "/bbb"}>bbb</Link>
        </li>
        <li>
            <Link to={this.fatherPath + "/bbb/ccc"}>ccc</Link>
        </li>    
    </ul>
        <Switch>
            <Route path={this.fatherPath + "/aaa"}>
                <div>aaa</div>
            </Route>
            <Route exact path={this.fatherPath + "/bbb"}>
                <div>bbb</div>
            </Route>
            <Route path={this.fatherPath + "/bbb/:id"}>
                <div>ccc</div>
            </Route> 
       </Switch>
</div>

此处需要注意的是第二个Router,需要加exact属性。第三个路由才能正确匹配到/bbb/ccc,否则路由匹配到/bbb就不再往下匹配了。或者把第二第三个路由调换位置,也可以正确匹配到ccc。
测试第二个路由如果写成/bbb(/:id),什么都匹配不到,还在研究这种匹配方式。

上一篇 下一篇

猜你喜欢

热点阅读