react-router-domV6版本的路由和嵌套路由写法详解
作者：ToBeBetterPersonOne
本文主要介绍了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要写二级路由的路径
React Router v6使用路由嵌套和重定向
v6版本与v5版本差异较大，以下为V6使用路由嵌套及路由重定向方法,子路由路径不用加"/"，v6中会自动拼接
App.jsx
import React, { Component } from 'react'
import { Route,Routes,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'
export default class App extends Component {
render() {
return (
<div>
<div className='row'>
<Header/>
</div>
<div className='row'>
<div className='col-xs-2 col-xs-offset-2'>
<div className='list-group'>
{/* 链接路由 */}
<MyNavLink to="/about" >About</MyNavLink>
<MyNavLink to="/home" >Home</MyNavLink>
</div>
</div>
</div>
<div className='col-xs-6'>
<div className='panel'>
<div className='panel-body'>
{/* 注册路由 */}
<Routes>
{/* 首次进入页面是重定向到/about路径 */}
<Route path="*" element={<Navigate to="/about"/>}></Route>
<Route path="/about" element={<About/>}></Route>
<Route path="/home/*" element={ <Home/>}>
</Route>
</Routes>
</div>
</div>
</div>
</div>
)
}
}Home/index.jsx
import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Routes,Navigate} from 'react-router-dom'
import News from './News'
import Messages from './Messages'
export default class Home extends Component {
render() {
return (
<div>
<h3>Home内容</h3>
<div className='list-group'>
<MyNavLink to="news" >News</MyNavLink>
<MyNavLink to="messages" >Messages</MyNavLink>
</div>
<div>
<Routes>
<Route path="*" element={<Navigate to="messages"/>}></Route>
<Route path="news" element={<News/>}></Route>
<Route path="messages" element={<Messages/>}></Route>
</Routes>
</div>
</div>
)
}
}Home/Messages/index.jsx
import React, { Component } from 'react'
export default class Messages extends Component {
render() {
return (
<ul>
<li>message1</li>
<li>message2</li>
<li>message3</li>
<li>message4</li>
</ul>
)
}
}MyNavLink/index.jsx
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class MyVavLink extends Component {
render() {
return (
<NavLink className="list-group-item" {...this.props}/>
)
}
}
到此这篇关于react-router-domV6版本的路由和嵌套路由写法详解的文章就介绍到这了,更多相关React Router v6路由和嵌套路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！