日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：ToBeBetterPersonOne ? 更新時間： 2022-05-06 編程語言

1 - 單級路由

Home
about


? }/>
?

2 - 嵌套路由（about路徑進行嵌套）

一級路由

Home
about


? }/>
? 
?

二級路由

跳轉按鈕一般最好寫完整，否則看代碼看不清楚

新聞
消息


? ? }/>
? ? }/>

跳轉切換的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 (
? ? ? ? ? ??
? ? ? ? ? ? 

? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? ? ? {/* 鏈接路由 */}
? ? ? ? ? ? ? ? ? ? ? ? ? ? About
? ? ? ? ? ? ? ? ? ? ? ? ? ? Home?
??
? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? ? ? {/* 注冊路由 */}
? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ??? ?{/* 首次進入頁面是重定向到/about路徑 */}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }>?? ??? ??? ??? ??? ??? ??? ??? ??? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 
? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? 


? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? 

? ? ? ? ? ??
? ? ? ? )
? ? }
}

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 (
? ? ? ? ? ?

? ? ? ? ? ? ? ?
Home內容

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? News
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Messages ?
? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? ?? ?
? ? ? ? ? ? ? ? ? ? ? ? }>
? ? ? ? ? ? ? ? ? ? ? ? }>
? ? ? ? ? ? ? ? ? ? ? ? }>
? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? 

? ? ? ? ? ?

? ? ? ? )
? ? }
}

Home/Messages/index.jsx

import React, { Component } from 'react'

export default class Messages extends Component {
? ? render() {
? ? ? ? return (
? ? ? ? ? ? 
    
? ? ? ? ? ? ? ? 
  • message1
    • 
? ? ? ? ? ? ? ? 
  • message2
    • 
? ? ? ? ? ? ? ? 
  • message3
    • 
? ? ? ? ? ? ? ? 
  • message4
    • 
? ? ? ? ? ? 

? ? ? ? )
? ? }
}

MyNavLink/index.jsx

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class MyVavLink extends Component {
? ? render() {
? ? ? ? return (
? ? ? ? ? ? 
? ? ? ? )
? ? }
}

原文鏈接：https://blog.csdn.net/led1114/article/details/122802885
欄目分類
最近更新