React 设置多层级url跳转路由时遇到到问题

搭建框架时遇到想要用层叠url的方式来区别每一个应用模块,比如:

router.js

但是渲染完成后出现了问题

http://localhost:1209/page 可以看见是没有问题,正确的渲染结果为‘page’

http://localhost:1209/page 

但是 http://localhost:1209/page/page-child 出现了问题

渲染结果不仅仅有‘page-child’ 还有 ‘page’路由匹配到的模块‘page'

http://localhost:1209/page/page-child

百度查询资料没一个说到点子上的,有点头疼。

只能去看官方文档了http://reacttraining.cn/web/api/Route/exact-bool

最终发现了一个关键字 “exact”,这样去使用

exact

解释为:如果exact为true,则仅当路径与location.path名称完全匹配时才会匹配。

加上exact后再看看http://localhost:1209/page/page-child

完美解决!

加上exact后再看看http://localhost:1209/page/page-child

附:exact 与 location.path对比匹配表

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容