react-router-dom v6版本跳轉(zhuǎn)路徑的實現(xiàn)方法
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.在需要點擊跳轉(zhuǎ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 進行路由跳轉(zhuǎn)等操作了。比如,在 http.js 。
import { customHistory } from '@/utils/history' customHistory.push('/login') <unstable_HistoryRouter>
提供一個將history作為prop的實例對象??梢允褂盟诜荝eact的上下文環(huán)境或全局變量中使用Router。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
react ant-design Select組件下拉框map不顯示的解決
這篇文章主要介紹了react ant-design Select組件下拉框map不顯示的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式
這篇文章主要介紹了React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06react實現(xiàn)pure render時bind(this)隱患需注意!
這篇文章主要為大家詳細介紹了值得你在react實現(xiàn)pure render的時候,需要注意的bind(this)隱患,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03react-router-dom 嵌套路由的實現(xiàn)
這篇文章主要介紹了react-router-dom 嵌套路由的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05使用webpack5從0到1搭建一個react項目的實現(xiàn)步驟
這篇文章主要介紹了使用webpack5從0到1搭建一個react項目的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12