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-router中結合webpack實現按需加載實例
本篇文章主要介紹了React-router中結合webpack實現按需加載實例,非常具有實用價值,需要的朋友可以參考下2017-05-05React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架,所以產生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關于React入門教程之Hello World以及環(huán)境搭建的相關資料,需要的朋友可以參考借鑒。2017-07-07