脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 非组件路由

React 在非组件环境切换路由的方法

 更新时间：2023年10月26日 10:22:42   作者：程序员超超  
这篇文章主要介绍了React 在非组件环境切换路由的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

我的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 在非组件环境切换路由的文章就介绍到这了,更多相关React 非组件环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React创建组件的的方式汇总

    React创建组件的的方式汇总

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React组件的两种创建方式,一种是使用函数创建组件另一种是使用类创建组件，需要的朋友可以参考下
    2021-11-11
  • React实现倒计时功能组件

    React实现倒计时功能组件

    这篇文章主要为大家详细介绍了如何通过React实现一个倒计时功能组件,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下
    2023-09-09
  • React.js入门实例教程之创建hello world 的5种方式

    React.js入门实例教程之创建hello world 的5种方式

    React 是近期非常热门的一个前端开发框架。应用非常广泛，接下来通过本文给大家介绍React.js入门实例教程之创建hello world 的5种方式 ，需要的朋友参考下吧
    2016-05-05
  • React中的权限组件设计问题小结

    React中的权限组件设计问题小结

    这篇文章主要介绍了React中的权限组件设计,整个过程也是遇到了很多问题，本文主要来做一下此次改造工作的总结，对React权限组件相关知识感兴趣的朋友一起看看吧
    2022-07-07
  • React函数组件和类组件的区别及说明

    React函数组件和类组件的区别及说明

    这篇文章主要介绍了React函数组件和类组件的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 详解如何使用React构建跑马灯组件

    详解如何使用React构建跑马灯组件

    当你想到跑马灯时,往往会想到游乐园里那些充满活力的灯光和旋转的显示,带回童年的美好回忆,本文将和大家一起探索如何在 React 中构建一个引人入胜的跑马灯组件,需要的朋友可以参考下
    2024-04-04
  • 使用React Native创建以太坊钱包实现转账等功能

    使用React Native创建以太坊钱包实现转账等功能

    这篇文章主要介绍了使用React Native创建以太坊钱包，实现转账等功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • react优雅处理多条件鼠标拖拽位移

    react优雅处理多条件鼠标拖拽位移

    这篇文章主要为大家详细介绍了react优雅处理多条件鼠标拖拽位移，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 详解如何使用Jest测试React组件

    详解如何使用Jest测试React组件

    在本文中,我们将了解如何使用Jest（Facebook 维护的一个测试框架）来测试我们的React组件,我们将首先了解如何在纯 JavaScript 函数上使用 Jest,然后再了解它提供的一些开箱即用的功能,这些功能专门用于使测试 React 应用程序变得更容易,需要的朋友可以参考下
    2023-10-10
  • react 生命周期实例分析

    react 生命周期实例分析

    这篇文章主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
    2020-05-05

最新评论