嵌套路由的坑 react-router-dom V6

周大胖子

一级路由

1. 
   
2. 
   
3. <NavLink to="/home">Home</NavLink>
   
4. <NavLink to="/about">about</NavLink>
   
5. 
   
6. <Routes>
   
7.   <Route path='/home' element={<Home/>}/>
   
8.   <!--要嵌套的路由这里一定要写/*  为了告诉这个路由后续会跟着其它路径
   
9.     NavLink 千万不要写和Route一样的/about/*
   
10.     否则/about 这个按钮路由css中的active会消失
    
11.    -->
    
12.   <Route path='/about/*' element={<About/>}/>
    
13. </Routes>
    
14. 
    

复制代码

二级路由[拥有二级路由的组件 不可以轻易引用 外层包裹的 Router 问题 ]

跳转按钮一般最好写完整，否则看代码看不清楚

跳转切换的path要写二级路由的路径

v6版本与v5版本差异较大，以下为V6使用路由嵌套及路由重定向方法,子路由路径不用加"/"，v6中会自动拼接

1. 
   
2. 
   
3. <NavLink to="/about/news">新闻</NavLink>
   
4. <NavLink to="/about/message">消息</NavLink >
   
5. 
   
6. <Routes>
   
7.     <Route path='news' element={<News/>}/>
   
8.     <Route path='message' element={<Message/>}/>
   
9. </Routes>
   
10. 
    

复制代码

资料来源：https://www.jb51.net/article/239862.htm