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 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了React組件的兩種創(chuàng)建方式,一種是使用函數(shù)創(chuàng)建組件另一種是使用類創(chuàng)建組件，需要的朋友可以參考下2021-11-11
React實(shí)現(xiàn)倒計(jì)時(shí)功能組件
這篇文章主要為大家詳細(xì)介紹了如何通過React實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能組件,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-09-09
React.js入門實(shí)例教程之創(chuàng)建hello world 的5種方式
React 是近期非常熱門的一個(gè)前端開發(fā)框架。應(yīng)用非常廣泛，接下來通過本文給大家介紹React.js入門實(shí)例教程之創(chuàng)建hello world 的5種方式 ，需要的朋友參考下吧2016-05-05
React中的權(quán)限組件設(shè)計(jì)問題小結(jié)
這篇文章主要介紹了React中的權(quán)限組件設(shè)計(jì),整個(gè)過程也是遇到了很多問題，本文主要來做一下此次改造工作的總結(jié)，對React權(quán)限組件相關(guān)知識感興趣的朋友一起看看吧2022-07-07
這篇文章主要介紹了React函數(shù)組件和類組件的區(qū)別及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
當(dāng)你想到跑馬燈時(shí),往往會(huì)想到游樂園里那些充滿活力的燈光和旋轉(zhuǎn)的顯示,帶回童年的美好回憶,本文將和大家一起探索如何在 React 中構(gòu)建一個(gè)引人入勝的跑馬燈組件,需要的朋友可以參考下2024-04-04
使用React Native創(chuàng)建以太坊錢包實(shí)現(xiàn)轉(zhuǎn)賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包，實(shí)現(xiàn)轉(zhuǎn)賬等功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了react優(yōu)雅處理多條件鼠標(biāo)拖拽位移，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
在本文中,我們將了解如何使用Jest（Facebook 維護(hù)的一個(gè)測試框架）來測試我們的React組件,我們將首先了解如何在純 JavaScript 函數(shù)上使用 Jest,然后再了解它提供的一些開箱即用的功能,這些功能專門用于使測試 React 應(yīng)用程序變得更容易,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了react 生命周期,結(jié)合實(shí)例形式分析了react 生命周期基本原理、操作步驟與注意事項(xiàng),需要的朋友可以參考下2020-05-05