[JavaScript知识库]react-router-domV6版本的路由和嵌套路由写法

1 - 单级路由

<NavLink to="/home">Home</NavLink>
<NavLink to="/about">about</NavLink>

<Routes>
  <Route path='/home' element={<Home/>}/>
  <Route path='/about' element={<About/>}/>
</Routes>

2 - 嵌套路由（about路径进行嵌套）

一级路由

<NavLink to="/home">Home</NavLink>
<NavLink to="/about">about</NavLink>

<Routes>
  <Route path='/home' element={<Home/>}/>
  <!--要嵌套的路由这里一定要写/*  为了告诉这个路由后续会跟着其它路径
	NavLink 千万不要写和Route一样的/about/*
	否则/about 这个按钮路由css中的active会消失
   -->
  <Route path='/about/*' element={<About/>}/>
</Routes>

二级路由

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

<NavLink to="/about/news">新闻</NavLink>
<NavLink to="/about/message">消息</NavLink >

<Routes>
    <Route path='news' element={<News/>}/>
    <Route path='message' element={<Message/>}/>
</Routes>

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