快捷導(dǎo)航

React?在非組件環(huán)境切換路由的方法

更新時(shí)間：2023年10月26日 10:22:42 作者：程序員超超

這篇文章主要介紹了React?在非組件環(huán)境切換路由的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(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)到登錄頁(yè)面（10000表示接口返回token過期），但是像上面這樣使用路由，該怎么在組件外面（例如axios的邏輯中）做路由跳轉(zhuǎn)呢。

目前看這種方法好像無(wú)法做跳轉(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React創(chuàng)建組件的的方式匯總
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。這篇文章主要介紹了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)用非常廣泛，接下來(lái)通過本文給大家介紹React.js入門實(shí)例教程之創(chuàng)建hello world 的5種方式，需要的朋友參考下吧
2016-05-05
React中的權(quán)限組件設(shè)計(jì)問題小結(jié)
這篇文章主要介紹了React中的權(quán)限組件設(shè)計(jì),整個(gè)過程也是遇到了很多問題，本文主要來(lái)做一下此次改造工作的總結(jié)，對(duì)React權(quán)限組件相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-07-07
React函數(shù)組件和類組件的區(qū)別及說(shuō)明
這篇文章主要介紹了React函數(shù)組件和類組件的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解如何使用React構(gòu)建跑馬燈組件
當(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
react優(yōu)雅處理多條件鼠標(biāo)拖拽位移
這篇文章主要為大家詳細(xì)介紹了react優(yōu)雅處理多條件鼠標(biāo)拖拽位移，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
詳解如何使用Jest測(cè)試React組件
在本文中,我們將了解如何使用Jest（Facebook 維護(hù)的一個(gè)測(cè)試框架）來(lái)測(cè)試我們的React組件,我們將首先了解如何在純 JavaScript 函數(shù)上使用 Jest,然后再了解它提供的一些開箱即用的功能,這些功能專門用于使測(cè)試 React 應(yīng)用程序變得更容易,需要的朋友可以參考下
2023-10-10
react 生命周期實(shí)例分析
這篇文章主要介紹了react 生命周期,結(jié)合實(shí)例形式分析了react 生命周期基本原理、操作步驟與注意事項(xiàng),需要的朋友可以參考下
2020-05-05