React?在非組件環(huán)境切換路由的方法
更新時間：2023年10月26日 10:22:42 作者：程序員超超
這篇文章主要介紹了React?在非組件環(huán)境切換路由的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
我的react-router-dom版本是6.16.0。之前在react中是這樣配置路由的
App.jsx
import ReactDOM from 'react-dom/client';
import { HashRouter, Route, Routes } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(
<HashRouter>
<Routes>
<Route
path={XXX}
element={<Component></Component>}
key={XXX} />
</Routes>
</HashRouter>
);然后使用axios做接口攔截，當接口的是響應碼是10000的時候，跳轉到登錄頁面（10000表示接口返回token過期），但是像上面這樣使用路由，該怎么在組件外面（例如axios的邏輯中）做路由跳轉呢。
目前看這種方法好像無法做跳轉。
可以使用下面的方式做
router/index.jsx
import { createHashRouter } from "react-router-dom";
export const router = createHashRouter([
{
path: "/",
element: <Component />,
},
]);App.jsx
import React, { useEffect } from "react";
import { RouterProvider, createHashRouter } from "react-router-dom";
import { router } from "@/router";
export default () => {
return (
<RouterProvider router={router} />
);
};然后如果組件外面想切換路由：
就類似這樣：
import { router } from "@/router";
router.navigate('/login');到此這篇關于React 在非組件環(huán)境切換路由的文章就介紹到這了,更多相關React 非組件環(huán)境內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在React中實現(xiàn)分塊導出大量數(shù)據表格并壓縮成圖片的解決方案
在現(xiàn)代Web開發(fā)中,處理和展示大量數(shù)據是一個常見的挑戰(zhàn),特別是在使用React框架時,我們經常需要將這些數(shù)據以表格的形式展示,并提供導出功能,本文將介紹如何在React中實現(xiàn)一個高效、分塊導出大量數(shù)據表格,并將其壓縮為圖片的解決方案,需要的朋友可以參考下2024-12-12
這篇文章主要為大家介紹了react源碼合成事件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關于react-router實現(xiàn)跳轉傳值的相關資料，文中給出了詳細的示例代碼，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-05-05
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11
Hooks是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)”React狀態(tài)和生命周期功能。Hooks在類內部不起作用 - 它們允許你無需類就使用 React。2021-05-05
React?中的事件，是對原生事件的封裝，叫做合成事件。抽象出一層合成事件，是為了做兼容，抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度，帶大家解讀下源碼，感興趣的可以了解一下2022-12-12
這篇文章主要為大家介紹了React?Suspense前后端IO異步操作處理示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了從頭寫React-like框架的工程搭建實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
引入代碼檢查工具stylelint實戰(zhàn)問題經驗總結分享
eslint的配置引入比較簡單，網上有比較多的教程，而stylelint的教程大多語焉不詳。在這里，我會介紹一下我在引入stylelint所遇到的坑，以及解決方法2021-11-11