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