React怎样在非组件环境下拿到路由信息实现路由跳转

最新推荐文章于 2024-03-26 16:38:39 发布

数组喜欢打对象

最新推荐文章于 2024-03-26 16:38:39 发布

阅读量1.5k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_57435656/article/details/121410733

版权

最近写项目的时候遇到一个问题如图所示:

用户token失效后，页面需要跳转回登录页面，用location.href直接赋值会导致页面刷新(对SPA来说是可耻的)。而且location.href跳转的时候，页面并没有提示信息出现就直接跳转了，然后就想着使用useHistory来进行跳转，但是hooks只能在函数组件或者其它hooks中使用，然后人就没了。各种查资料之后终于找到方法了。解决方法如下：

安装react-router-dom时，默认会安装history包，可以通过这个包来自己创建history对象。

// 单独封装 默认导出
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history

然后再导入使用即可：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

数组喜欢打对象

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
React怎样在非组件环境下拿到路由信息实现路由跳转

最近写项目的时候遇到一个问题如图所示:
复制链接

扫一扫

react-native非路由组件中实现路由跳转

九段刀客的博客

11-22

460

使用场景：对请求进行封装，要在封装的逻辑中进行退出登录，跳转到login页面的功能APP.js。

react-router-dom，react-router 在非组件内进行路由跳转

tomotoCoder的博客

10-15

2397

前言：在写项目时需要在非组件的js文件里进行路由跳转，比如axios里请求响应拦截后做路由跳转, 但是又不能获取到this.props.history，那怎么才能获取到history对象呢？ 1.创建一个 utils/history.js import { createBrowserHistory } from 'history'; export default createBrowserHistory(); 2.主入口index.js import ReactDOM from 're.

4 条评论您还未登录，请先登录后发表或查看评论

React在非组件里进行路由跳转

Ricale的博客

07-21

500

【代码】React在非组件里进行路由跳转。

React常见跳转方式汇总

最新发布

大道至简

03-26

794

Link><NavLink>在React中，路由跳转通常是通过使用库实现的，它是React的一个第三方库，专门用于处理在React应用程序中的路由。以下是如何在不同的情况下使用。

极客园pc项目四处理react-router-dom非组件跳转问题

qq_45619095的博客

04-29

375

1.先在utils中新建history.js import {createBrowserHistory} from 'history' const histtory=createBrowserHistory() export default history 2.在app.js中导入history import history from 'utils/history' <Router history={history}> <Routes>

react路由懒加载的方法、react在非组件环境下拿到路由信息进行页面跳转的方法

qq_52212982的博客

10-23

758

react路由懒加载的方法与在非组件环境下拿到路由信息进行页面跳转的方法

react非路由跳转组件获取上下文

01-08

react非路由跳转组件获取上下文react非路由跳转组件获取上下文解决方案1.通过路由跳转2.通过属性传递3.通过withRouter包装 react非路由跳转组件获取上下文解决方案在react组件中，不是所有组件会通过路由跳转，也...

react实现同页面三级跳转路由布局

10-16

主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

React Native中导航组件react-navigation跨tab路由处理详解

11-28

大家应该都有所体会，我们在一般应用都有跨tab跳转的需求，这就需要特别处理下路由，所以下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab....

react-router JS 控制路由跳转实例

10-19

主要介绍了react-router JS 控制路由跳转实例，react实现路由可以直接使用react-router。有兴趣的可以了解一下

react在非组件环境下获取路由信息(history模式进行跳转)

DDAD9527的博客

11-18

2004

非组件环境下获取路由信息和, 实现一个简单的路由登录拦截

项目非组件文件进行路由跳转【react与vue等其他框架均可使用】

weixin_44034696的博客

07-17

230

在我们项目的开发过程中除了在我们的组件内部进行路由跳转再就是通过全局配置路由进行跳转今天要说的是有特殊的情况需要在公共方法文件里进行路由跳转想要实现这个也很简单，只需要引入history库。 npm i history --save 而后比如说在utils文件里面使用： import { createHashHistory } from 'history'; // hash路由 // 或者 import { createBrowserHistory } from 'history'; // histo

react-router-dom6学习4-路由跳转

qq_41632427的博客

08-15

754

React 在非组件环境拿到路由信息

weixin_58207509的博客

11-19

615

在React项目中有时候我们不得不在一些非组件中使用Hooks 例如在判断用户token权限过期进行跳转页面时一般是在工具函数中实现那么像这种情况我们如何使用函数组件里才能使用的history呢以下我就举出几种我们会经常碰到的hooks情况进行说明情况一在非组件环境拿到路由信息解决方法一: 如果产品经理说无所谓不用考虑性能只要功能出来就可以那我们就采取最简单webApl的方法 window.location.href = '/#/login' 早点下班溜之大吉 ,要是产品经理说

React中如何在非组件环境下拿到路由信息

m0_58447769的博客

11-18

716

用location.href直接赋值会导致页面刷新。如何在非组件内使用history跳转？背景 react-router-dom中直接有Router这个包，但是它的Router 没有history属性有如下公式： Router + HashHistroy = HashRouter Router + BrowerHistroy = BrowerRouter 安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象思路单独

react如何在非组件环境下拿到路由信息

m0_60823684的博客

11-18

349

一.背景 react-router-dom中直接有Router这个包，但是Router 没有history属性安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象二.思路 1.单独引入Router，并自己创建history， import { Router, Route, Switch, Redirect } from 'react-router-dom' import { createBrowserHistory } from

React中非组件环境下拿到路由信息----------History

留着鼻涕敲代码

11-19

780

1.如何拿到路由信息，通常情况下都是在组件情况下通过useHistory拿到路由信息的但是有个很严重的问题，useHistory这个方法只能只能在组件环境下才能使用，如果非组件将无法使用 2. Router包与 HashRouter/BrowerRouter的区别 react-router-dom中是有Router这个包，但是它Router 没有history属性简单理解就是： Router + HashHistroy = HashRouter Router + BrowerHistroy =

React 路由介绍（路由跳转、react-router-dom、路由传递参数）（七）

weixin_42272869的博客

05-04

1284

React 路由介绍（七） React 官网链接：英文官网中文官网接着上节 React ajax 发送请求（六）前言在我们实际开发的时候，React 应用其实是一个单页Web应用（single page web application，SPA），SPA应用的特点如下：单页Web应用，整个应用只有一个完整的页面点击页面中的链接不会刷新整个页面，只会做页面的局部更新数据都需要通过 ajax 请求获取，并在前端异步展现在原生的 html 中，跳转页面靠标签来进行页面的跳转，而在

面试 - ReactRouter6相关变更

xiannverhaha的博客

08-29

223

【代码】面试 - ReactRouter6相关变更。

react类组件路由跳转

07-23

在 React 类组件中，可以使用路由库（如 react-router-dom）来实现路由跳转。以下是一种常见的方法： 1. 首先，确保你已经安装并配置了路由库，比如 react-router-dom。 2. 在你的路由配置中，使用 `<Route>` 组件指定路径和要渲染的组件。 3. 在类组件中，可以通过 `this.props.history.push()` 方法来进行路由跳转。例如： ```jsx import React from 'react'; class Home extends React.Component { handleButtonClick = () => { // 跳转到另一个路径 this.props.history.push('/detail'); }; render() { return ( <div> <h1>Home Page</h1> <button onClick={this.handleButtonClick}>Go to Detail</button> </div> ); } } export default Home; ``` 在上面的例子中，当点击按钮时，会调用 `handleButtonClick` 方法，并使用 `this.props.history.push('/detail')` 进行路由跳转到 "/detail" 路径。 4. 在路由组件中，可以通过 `<Link>` 组件来实现路由跳转。例如： ```jsx import React from 'react'; import { Link } from 'react-router-dom'; class Home extends React.Component { render() { return ( <div> <h1>Home Page</h1> <Link to="/detail">Go to Detail</Link> </div> ); } } export default Home; ``` 在上面的例子中，使用 `<Link>` 组件将文字 "Go to Detail" 包裹起来，并设置 `to` 属性为目标路径 "/detail"，点击文字时会进行路由跳转。这样，你就可以在 React 类组件中实现路由跳转了。根据你的实际需求，可以使用 `this.props.history.push()` 或 `<Link>` 组件来进行跳转。记得在路由组件中包裹 `<Router>` 组件，以便在整个应用中进行路由管理。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交