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要写二级路由的路径