react-router-domV6版本改版踩坑記錄
更新時(shí)間：2024年03月14日 09:29:06 作者：HL477
這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
1.父組件注冊(cè)路由
v5版本：
import { Route } from 'react-router-dom'
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
v6版本：
import { Route } from 'react-router-dom'
<Route path="about" element={<About />} />
<Route path="home" element={<Home />} />
2.NavLink點(diǎn)擊高亮顯示
v5版本：
import { NavLink } from 'react-router-dom'
<NavLink activeClassName="highlight" className="about" to="/about" >About</NavLink>
v6版本：
以下二者選一即可，一定要注意 （isActive ? " highlight"） highlight前面的空格！??！
// 官方寫(xiě)法
<NavLink className={({ isActive }) => "about" + (isActive ? " highlight" : "")} to="about">About</NavLink>
// ES6 模版字符串寫(xiě)法
<NavLink className={({ isActive }) => `about ${isActive ? "highlight" : ""}`} to="about">About</NavLink>
3.Switch（單一匹配）更換為Routes
import { Routes,Route } from 'react-router-dom'
<Routes>
<Route path="about" element={<About />} />
<Route path="home" element={<Home />} />
</Routes>
4.Redirect重定向
v5版本：
import ｛ Redirect ｝from 'react-router-dom'
<Routes>
<Route path="/about" element={<About />} />
<Route path="/home" element={<Home />} />
// 寫(xiě)在這里
<Redirect to="/about" />
</Routes>
v6版本：
import ｛ Navigate ｝from 'react-router-dom'
<Routes>
<Route path="about/*" element={<About />} />
<Route path="home/*" element={<Home />} />
// 寫(xiě)在這里
<Route path="/*" element={<Navigate to="/about" />} />
</Routes>
5.嵌套路由
v5版本:
// 父組件
<Route path="home/" element={<Home />} />
// 路由鏈接
<NavLink className="about" to="/home/news" >News</NavLink>
// 注冊(cè)路由和重定向
<Switch>
<NavLink className="news" to="/home/news" >News</NavLink>
<NavLink className="message" to="/home/message" >Message</NavLink>
<Redirect to="/home/news" />
</Switch>
v6版本：
// 父組件
<Route path="home/*" element={<Home />}>
// 路由鏈接
<NavLink className="news" to="news" >News</NavLink>
<NavLink className="message" to="news" >News</NavLink>
// 注冊(cè)路由和重定向
<Routes>
<Route path="news" element={<News />} />
<Route path="message" element={<Message />} />
<Route path="/" element={<Navigate to="news" />} />
</Routes>
6.params參數(shù)傳遞
v5版本：
//路由鏈接(攜帶參數(shù))：
<Link to='/demo/test/tom/18'}>詳情</Link>
//或 <Link to={{ pathname:'/demo/test/tom/18' }}>詳情</Link>
//注冊(cè)路由(聲明接收)：
<Route path="/demo/test/:name/:age" component={Test}/>
//接收參數(shù)：
this.props.match.params
v6版本：
//路由鏈接(攜帶參數(shù))：
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
//或 <Link to={`/b/child1/${id}/${title}`}>Child1</Link>
//注冊(cè)路由(聲明接收)：
<Route path="/b/child1/:id/:title" element={<Test/ >} />
//接收參數(shù)：接收參數(shù)的組件一定要是函數(shù)式聲明的（class不可以）！?。?
import { useParams } from "react-router-dom";
const params = useParams();
//params參數(shù) => {id: "01", title: "消息1"}
7.search參數(shù)
v5版本：
//路由鏈接(攜帶參數(shù))：
<Link to='/demo/test?name=tom&age=18'}>詳情</Link>
//注冊(cè)路由(無(wú)需聲明，正常注冊(cè)即可)：
<Route path="/demo/test" component={Test}/>
//接收參數(shù)：
this.props.location.search
//備注：獲取到的search是urlencoded編碼字符串(例如: ?id=10&name=zhangsan)，需要借助query-string解析參數(shù)成對(duì)象
v6版本：
//路由鏈接(攜帶參數(shù))：
<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>
//注冊(cè)路由(無(wú)需聲明，正常注冊(cè)即可)：
<Route path="/b/child2" component={Test}/>
//接收參數(shù)方法1：接收參數(shù)的組件一定要是函數(shù)式聲明的（class不可以）?。?！
import { useLocation } from "react-router-dom";
import { qs } from "url-parse";
const { search } = useLocation();
const searchs = qs.parse(search)
//search參數(shù) => {age: "20", name: "zhangsan"}
//接收參數(shù)方法2：接收參數(shù)的組件一定要是函數(shù)式聲明的（class不可以）！??！
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
// console.log( searchParams.get("id")); // 12
//備注：獲取到的search是urlencoded編碼字符串(例如: ?age=20&name=zhangsan)，需要借助 url-parse 里面的 qs.parse 解析參數(shù)成對(duì)象
8.state參數(shù)
v5版本：
//路由鏈接(攜帶參數(shù))：
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>詳情</Link>
//注冊(cè)路由(無(wú)需聲明，正常注冊(cè)即可)：
<Route path="/demo/test" component={Test}/>
//接收參數(shù)：
this.props.location.state
//備注：刷新也可以保留住參數(shù)
v6版本：
//通過(guò)Link的state屬性傳遞參數(shù)
<Link
className="nav"
to={`/b/child2`}
state={{ id: 999, name: "i love merlin" }}
>
Child2
</Link>
//注冊(cè)路由(無(wú)需聲明，正常注冊(cè)即可)：
<Route path="/b/child2" component={Test}/>
//接收參數(shù)：接收參數(shù)的組件一定要是函數(shù)式聲明的（class不可以）！??！
import { useLocation } from "react-router-dom";
const { state } = useLocation();
const { xx, xx } = state || {}
//state參數(shù) => {id: 999, name: "我是梅琳"}
//備注：刷新也可以保留住參數(shù)
9.編程式路由跳轉(zhuǎn)
v5版本
v5版本：push跳轉(zhuǎn)攜帶params參數(shù)
props.history.push(`/b/child1/${id}/${title}`)v5版本：push跳轉(zhuǎn)攜帶search參數(shù)
props.history.push(`/b/child1?id=${id}&title=${title}`);v5版本：push跳轉(zhuǎn)攜帶state參數(shù)
props.history.push(`/b/child1`, { id, title });v5版本：前進(jìn)
this.props.history.goForward();
v5版本：后退
this.props.history.goBack();
v5版本：前進(jìn)或回退 ( go )
this.props.history.go(-2); //回退到前2條的路由
v5版本：replace跳轉(zhuǎn)攜帶params參數(shù)
this.props.history.replace(`/home/message/detail/${id}/${title}`)v5版本：replace跳轉(zhuǎn)攜帶search參數(shù)
this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)v5版本：replace跳轉(zhuǎn)攜帶state參數(shù)
this.props.history.replace(`/home/message/detail`, { id, title });v5版本：在一般組件中使用編程式路由導(dǎo)航 (非路由組件)
import {withRouter} from 'react-router-dom'
class Header extends Component {
// withRouter(Header)后，就可以在一般組件內(nèi)部使用 this.props.history
//...
}
export default withRouter(Header)
v6版本
v6版本：
// v6版本編程導(dǎo)航使用 useNavigate
import { useNavigate } from "react-router-dom";
export default function A() {
const navigate = useNavigate();
//...
}
v6版本：push跳轉(zhuǎn)攜帶params參數(shù)
navigate(`/b/child1/${id}/${title}`);v6版本：push跳轉(zhuǎn)攜帶search參數(shù)
navigate(`/b/child2?id=${id}&title=${title}`);v6版本：push跳轉(zhuǎn)攜帶state參數(shù)
navigate("/b/child2", { state: { id, title }});v6版本：前進(jìn)
<button onClick={() => navigate(1)}>Go Forword</button>v6版本：后退
<button onClick={() => navigate(-1)}>Go back</button>v6版本：前進(jìn)或后退幾步
<button onClick={() => navigate(2)}>Go</button>v6版本：replace跳轉(zhuǎn)攜帶params參數(shù)
navigate(`/b/child1/${id}/${title}`,{replace: true});v6版本：replace跳轉(zhuǎn)攜帶search參數(shù)
navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});v6版本：replace跳轉(zhuǎn)攜帶state參數(shù)
navigate("/b/child2", { state: { id, title },replace: true});10.函數(shù)組件使用生命周期需要用 useEffect
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
// 這里的作用是 componentDidMount
export default function News() {
const navigate = useNavigate()
useEffect(() => {
setTimeout(() => {
navigate("/home/message")
}, 2000)
})
return (
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
)
}
11.withRouter（v6版本棄用）
直接使用 useNavigate 即可
12.class組件沒(méi)有this.props.history問(wèn)題
// 我是這樣解決的：父組件App用函數(shù)式組件并引入 useNavigate 然后傳給子組件使用
// 父組件
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
export default function App() {
const navigate = useNavigate()
return (
<Routes>
<Route path="/login" element={<Login navigate={navigate} />}> <Route path="/" elment={<Admin />}>
</Routes>
)
}
// 子組件
export default class Login extends Component {
// 定義跳轉(zhuǎn)的方法
jump = () => {
this.props.navigate('/')
}
render() {
return (
<button onClick={this.jump}>點(diǎn)擊跳轉(zhuǎn)</button>
)
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React實(shí)現(xiàn)一個(gè)拖拽排序組件的示例代碼
這篇文章主要給大家介紹了React實(shí)現(xiàn)一個(gè)拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動(dòng)畫(huà)、可自定義拖拽區(qū)域,文章通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在React中強(qiáng)制重新渲染的4 種方式案例代碼
這篇文章主要介紹了在React中強(qiáng)制重新渲染的4 種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了react如何利用懶加載減少首屏加載時(shí)間，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能
創(chuàng)建一個(gè)組件,實(shí)時(shí)展示時(shí)分秒,并且動(dòng)態(tài)更新數(shù)據(jù),這篇文章主要介紹了React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了react應(yīng)用中的DOM DIFF算法，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了React 路由懶加載的幾種實(shí)現(xiàn)方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
react項(xiàng)目初始化時(shí)解析url路徑中的動(dòng)態(tài)片段實(shí)現(xiàn)方案
本文將深入探討React項(xiàng)目初始化階段如何高效解析URL路徑中的動(dòng)態(tài)片段,實(shí)現(xiàn)優(yōu)雅的路由參數(shù)處理,幫助開(kāi)發(fā)者構(gòu)建更靈活的應(yīng)用程序,感興趣的朋友一起看看吧2025-07-07
flouting?ui定位組件完美替代ant?deisgn使用詳解
這篇文章主要為大家介紹了flouting?ui定位組件完美替代ant?deisgn使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
如何創(chuàng)建自己的第一個(gè)React 頁(yè)面
React是用于構(gòu)建用戶(hù)界面的JavaScript庫(kù)，本文主要介紹了如何創(chuàng)建自己的第一個(gè)React頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換
這篇文章主要介紹了react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07