美文网首页
关于React router 使用

关于React router 使用

作者: 2c4419e9dafa | 来源:发表于2020-04-08 17:06 被阅读0次
<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),什么都匹配不到,还在研究这种匹配方式。

相关文章

网友评论

      本文标题:关于React router 使用

      本文链接:https://www.haomeiwen.com/subject/dwatmhtx.html