react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
更新時間：2024年03月14日 09:41:44 作者：前端學(xué)習(xí)沖沖沖
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
react-router-dom v6版本跳轉(zhuǎn)路徑
說明
在V5中，可以通過withRouter包裹當(dāng)前組件使得當(dāng)前組件可以擁有其根組件的props屬性，也即可以拿到history對象等
但在V6版本中，使用了useNavigate代替withRouter，當(dāng)需要路由跳轉(zhuǎn)時，可以更快捷的使用
使用示例
1.引入useNavigate并且定義一個navigate
2.在需要點(diǎn)擊跳轉(zhuǎn)路由的地方，直接在點(diǎn)擊事件中使用navigate(),括號內(nèi)加入需要跳轉(zhuǎn)的路由path即可正常跳轉(zhuǎn)
react-router-domV6版本在js文件使用history跳轉(zhuǎn)
1.在 utils 下面 創(chuàng)建 history.js
// utils/history.js
import { createBrowserHistory } from "history";
export const customHistory = createBrowserHistory()2. 在 App.tsx 中引入 unstable_HistoryRouter 和 customHistory。
3.在 unstable_HistoryRouter 組件的 history 屬性上把 customHistory 傳遞過去。
// App.tsx
import { unstable_HistoryRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import Layout from '@/pages/Layout';
import Login from './pages/Login';
import {customHistory} from '@/utils/history'
import './App.scss';
function App() {
return (
<div className="App">
<Router history={customHistory}>
<Routes>
<Route path="/" element={<Navigate to="/home" />}></Route>
<Route path="/home" element={<Layout />}></Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
</Router>
</div>
);
}
export default App;4.然后，就可以在非組件環(huán)境下通過 customHistory 進(jìn)行路由跳轉(zhuǎn)等操作了。比如，在 http.js 。
import { customHistory } from '@/utils/history'
customHistory.push('/login')
<unstable_HistoryRouter>提供一個將history作為prop的實(shí)例對象?？梢允褂盟诜荝eact的上下文環(huán)境或全局變量中使用Router。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React?Router?v6路由懶加載的2種方式小結(jié)
React?Router?v6?的路由懶加載有2種實(shí)現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來看看它們的具體實(shí)現(xiàn)方法吧2024-04-04
React中的State和Props深入理解及關(guān)鍵區(qū)別
state和props是React中兩個核心概念,它們共同構(gòu)成了組件的數(shù)據(jù)管理機(jī)制,本文將詳細(xì)探討 state 和 props 的定義、用途、特點(diǎn)以及它們之間的關(guān)鍵區(qū)別,并提供一些最佳實(shí)踐,感興趣的朋友跟隨小編一起看看吧2026-01-01
這篇文章主要介紹了react 生命周期,結(jié)合實(shí)例形式分析了react 生命周期基本原理、操作步驟與注意事項(xiàng),需要的朋友可以參考下2020-05-05
淺談React Router關(guān)于history的那些事
這篇文章主要介紹了淺談React Router關(guān)于history的那些事，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家介紹了React源碼調(diào)試方式實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
很多朋友向小編反映一個問題關(guān)于React onClick 傳遞參數(shù)的問題，當(dāng)點(diǎn)擊刪除按鈕需要執(zhí)行刪除操作，針對這個問題該如何處理呢？下面小編給大家?guī)砹薘eact onClick 傳遞參數(shù)的問題，感興趣的朋友一起看看吧2021-10-10
React通過conetxt實(shí)現(xiàn)多組件傳值功能
Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實(shí)現(xiàn)多組件傳值功能，感興趣的朋友一起看看吧2021-10-10
這篇文章主要為大家介紹了react定位組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React是前端開發(fā)每天都用的前端框架，自然要深入掌握它的原理。我用 React 也挺久了，這篇文章就來總結(jié)一下我對 react 原理的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-11-11
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07