react-router-domV6版本的路由和嵌套路由寫法詳解

更新時間：2022年03月07日 10:08:15 作者：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/>}/>
? <!--要嵌套的路由這里一定要寫/* ?為了告訴這個路由后續(xù)會跟著其它路徑
?? ?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路由和嵌套路由內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React網絡請求發(fā)起方法詳細介紹
在編程開發(fā)中，網絡數據請求是必不可少的，這篇文章主要介紹了React網絡請求發(fā)起方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-09-09
react性能優(yōu)化useMemo與useCallback使用對比詳解
這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
React Hooks核心原理深入分析講解
這篇文章主要介紹了react hooks實現原理,文中給大家介紹了useState dispatch 函數如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-12-12
ReactNative列表ListView的用法
本篇文章主要介紹了ReactNative列表ListView的用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
React.js組件實現拖拽排序組件功能過程解析
這篇文章主要介紹了React.js組件實現拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-04-04
React星星評分組件的實現
評分插件在購物的應用中經?？梢钥吹玫剑怯弥鴦e人的總是沒有自己寫的順手，本文就使用React實現星星評分組件，感興趣的可以了解一下
2021-06-06
React中mobx和redux的區(qū)別及說明
這篇文章主要介紹了React中mobx和redux的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
React封裝高階組件實現路由權限的控制詳解
這篇文章主要介紹了React封裝高階組件實現路由權限的控制,在React中,為了實現安全可靠的路由權限控制,可以通過多種方式來確保只有經過授權的用戶才能訪問特定路徑下的資源,下面來介紹封裝高階組件控制的方法,需要的朋友可以參考下
2025-02-02
React.memo 和 useMemo 的使用問題小結
隨著代碼的增加，每次的狀態(tài)改變，頁面進行一次 reRender ，這將產生很多不必要的 reRender 不僅浪費性能，從而導致頁面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問題小結,需要的朋友可以參考下
2022-11-11
React-View-UI組件庫封裝Loading加載中源碼
這篇文章主要介紹了React-View-UI組件庫封裝Loading加載樣式,主要包括組件介紹，組件源碼及組件測試源碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06