脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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中实现分块导出大量数据表格并压缩成图片的解决方案

    在现代Web开发中,处理和展示大量数据是一个常见的挑战,特别是在使用React框架时,我们经常需要将这些数据以表格的形式展示,并提供导出功能,本文将介绍如何在React中实现一个高效、分块导出大量数据表格,并将其压缩为图片的解决方案,需要的朋友可以参考下
    2024-12-12
  • react源码合成事件深入解析

    react源码合成事件深入解析

    这篇文章主要为大家介绍了react源码合成事件深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • react-router实现跳转传值的方法示例

    react-router实现跳转传值的方法示例

    这篇文章主要给大家介绍了关于react-router实现跳转传值的相关资料，文中给出了详细的示例代码，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-05-05
  • redux工作原理讲解及使用方法

    redux工作原理讲解及使用方法

    这篇文章主要介绍了redux工作原理讲解及使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • 30分钟带你全面了解React Hooks

    30分钟带你全面了解React Hooks

    Hooks是一种函数，该函数允许您从函数式组件 “勾住(hook into)”React状态和生命周期功能。Hooks在类内部不起作用 - 它们允许你无需类就使用 React。
    2021-05-05
  • React实现合成事件的源码分析

    React实现合成事件的源码分析

    React 中的事件，是对原生事件的封装，叫做合成事件。抽象出一层合成事件，是为了做兼容，抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度，带大家解读下源码，感兴趣的可以了解一下
    2022-12-12
  • React Suspense前后端IO异步操作处理

    React Suspense前后端IO异步操作处理

    这篇文章主要为大家介绍了React Suspense前后端IO异步操作处理示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • antd upload上传如何获取文件宽高

    antd upload上传如何获取文件宽高

    这篇文章主要介绍了antd upload上传如何获取文件宽高问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • 从头写React-like框架的工程搭建实现

    从头写React-like框架的工程搭建实现

    这篇文章主要介绍了从头写React-like框架的工程搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 引入代码检查工具stylelint实战问题经验总结分享

    引入代码检查工具stylelint实战问题经验总结分享

    eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法
    2021-11-11

最新评论