react的路由配置和路由嵌套

也是基于我这篇《用react的路由写一个简单的导航》文章的延伸:https://blog.csdn.net/qq_42505615/article/details/121118546?spm=1001.2014.3001.5501

路由配置:

1.指定路由模式,引入HashRouter

ps:咱们默认用的是 BrowserRouter

react的路由配置和路由嵌套_第1张图片

 2.精确url匹配(exact)

例如:我们想把home作为默认的显示页面

          
          
          
          
          
          
          

加一条路径为 ‘/’ 的Route即可。

react的路由配置和路由嵌套_第2张图片

 react的路由配置和路由嵌套_第3张图片

 但是这个时候有个问题,不管我们点击哪个菜单,主页都一直存在。原因是模糊匹配引起的。

如果你不想让它模糊匹配,你就在后面加个 exact 属性 。这样就是精确匹配了。

         

下面说一下嵌套路由:

第一种写法:

例如:咱们让role里面套个share

react的路由配置和路由嵌套_第4张图片

 效果如图:

react的路由配置和路由嵌套_第5张图片

你可能感兴趣的:(React,react.js,哈希算法,前端)