react的路由配置和路由嵌套

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

路由配置：

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

ps：咱们默认用的是 BrowserRouter

 2.精确url匹配（exact）

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

          <Nav></Nav>
          <Route path="/" component={Home}></Route>
          <Route path="/home" component={Home}></Route>
          <Route path="/role" component={Role}></Route>
          <Route path="/share" component={Share}></Route>
          <Route path="/bug" component={Bug}></Route>
          <Route path="/detail/:id?/:name?" component={RoleDetail}></Route>

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

 

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

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

         <Route path="/" component={Home} exact></Route>

下面说一下嵌套路由：

第一种写法：

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

 效果如图：