欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年03月07日 10:08:15   作者:ToBeBetterPersonOne  
本文主要介紹了react-router-domV6版本的路由和嵌套路由寫法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

1 - 單級(jí)路由

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

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

2 - 嵌套路由(about路徑進(jìn)行嵌套)

一級(jí)路由

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

<Routes>
? <Route path='/home' element={<Home/>}/>
? <!--要嵌套的路由這里一定要寫/* ?為了告訴這個(gè)路由后續(xù)會(huì)跟著其它路徑
?? ?NavLink 千萬(wàn)不要寫和Route一樣的/about/*
?? ?否則/about 這個(gè)按鈕路由css中的active會(huì)消失
? ?-->
? <Route path='/about/*' element={<About/>}/>
</Routes>

二級(jí)路由

跳轉(zhuǎn)按鈕一般最好寫完整,否則看代碼看不清楚

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

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

跳轉(zhuǎn)切換的path要寫二級(jí)路由的路徑

React Router v6使用路由嵌套和重定向

v6版本與v5版本差異較大,以下為V6使用路由嵌套及路由重定向方法,子路由路徑不用加"/",v6中會(huì)自動(dòng)拼接

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'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? {/* 注冊(cè)路由 */}
? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Routes>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ??? ?{/* 首次進(jìn)入頁(yè)面是重定向到/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內(nèi)容</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}/>
? ? ? ? )
? ? }
}

到此這篇關(guān)于react-router-domV6版本的路由和嵌套路由寫法詳解的文章就介紹到這了,更多相關(guān)React Router v6路由和嵌套路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React獲取input值并提交的2種方法實(shí)例

    React獲取input值并提交的2種方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于React獲取input值并提交的2種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • react 移動(dòng)端實(shí)現(xiàn)列表左滑刪除的示例代碼

    react 移動(dòng)端實(shí)現(xiàn)列表左滑刪除的示例代碼

    這篇文章主要介紹了react 移動(dòng)端實(shí)現(xiàn)列表左滑刪除的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例

    React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例

    本篇文章主要介紹了React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-05-05
  • React入門教程之Hello World以及環(huán)境搭建詳解

    React入門教程之Hello World以及環(huán)境搭建詳解

    Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架,所以產(chǎn)生了react。后來(lái)反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料,需要的朋友可以參考借鑒。
    2017-07-07
  • React組件useReducer的講解與使用

    React組件useReducer的講解與使用

    在React函數(shù)式組件中,我們可以通過(guò)useState()來(lái)創(chuàng)建state,這種state創(chuàng)建方式會(huì)給我們返回兩個(gè)東西state和setState()。
    2023-04-04
  • React路由組件三種傳參方式分析講解

    React路由組件三種傳參方式分析講解

    本文主要介紹了React組件通信之路由傳參(react-router-dom),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • React-Native 組件之 Modal的使用詳解

    React-Native 組件之 Modal的使用詳解

    本篇文章主要介紹了React-Native 組件之 Modal的使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • React錯(cuò)誤邊界Error Boundaries詳解

    React錯(cuò)誤邊界Error Boundaries詳解

    錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹
    2022-12-12
  • 五分鐘教你了解一下react路由知識(shí)

    五分鐘教你了解一下react路由知識(shí)

    本文主要介紹了react路由知識(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法

    ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法

    這篇文章主要為大家介紹了ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07

最新評(píng)論