react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
react-router-dom v6版本跳轉(zhuǎn)路徑
說明
在V5中，可以通過withRouter包裹當(dāng)前組件使得當(dāng)前組件可以擁有其根組件的props屬性，也即可以拿到history對象等
但在V6版本中，使用了useNavigate代替withRouter，當(dāng)需要路由跳轉(zhuǎn)時(shí)，可以更快捷的使用
使用示例
1.引入useNavigate并且定義一個(gè)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>提供一個(gè)將history作為prop的實(shí)例對象?？梢允褂盟诜荝eact的上下文環(huán)境或全局變量中使用Router。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react ant-design Select組件下拉框map不顯示的解決
這篇文章主要介紹了react ant-design Select組件下拉框map不顯示的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解如何優(yōu)雅地在React項(xiàng)目中使用Redux
這篇文章主要介紹了詳解如何優(yōu)雅地在React項(xiàng)目中使用Redux，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式
這篇文章主要介紹了React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
今天介紹下React手寫tab切換問題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11
react實(shí)現(xiàn)pure render時(shí)bind(this)隱患需注意!
這篇文章主要為大家詳細(xì)介紹了值得你在react實(shí)現(xiàn)pure render的時(shí)候，需要注意的bind(this)隱患，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了react如何實(shí)現(xiàn)篩選條件組件問題,具有很好的參考價(jià)價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文給大家分享React鼠標(biāo)多選功能，通過導(dǎo)入組件直接包裹已經(jīng)設(shè)計(jì)好的列表即可，操作簡單方便,對React鼠標(biāo)多選相關(guān)知識感興趣的朋友一起看看吧2021-05-05
react-router-dom 嵌套路由的實(shí)現(xiàn)
這篇文章主要介紹了react-router-dom 嵌套路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
使用webpack5從0到1搭建一個(gè)react項(xiàng)目的實(shí)現(xiàn)步驟
這篇文章主要介紹了使用webpack5從0到1搭建一個(gè)react項(xiàng)目的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了React中Props的淺對比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-05-05