react在非组件环境下获取路由信息

最新推荐文章于 2024-08-06 11:32:29 发布
最新推荐文章于 2024-08-06 11:32:29 发布
阅读量1k 收藏
点赞数 1
分类专栏： react 文章标签： 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GZZ__z/article/details/121432895
版权
在React应用中，当需要在路由拦截器中处理无token情况并避免页面刷新时，不能直接使用window.location.href。文章介绍了如何在非组件内部使用history进行跳转，包括通过创建自定义history对象，引入Router并进行配置，最后在拦截器中利用这个自定义history实现动态路由跳转，例如history.push('/login')。
摘要由CSDN通过智能技术生成

出现这类问题,一般都是在react路由拦截时需要用到

当我们在拦截器中拦截到没有token时,应该是让他回到登录页,

一般想到的是直接使用window.location.href. 但是用location.href直接赋值会导致页面刷新

 那如何在非组件内使用history跳转呢？

首先说一下背景，react-router-dom中直接有Router这个包，但是它Router 没有history属性

有如下公式：

Router + HashHistroy = HashRouter

Router + BrowerHistroy = BrowerRouter

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

步骤：

单独引入Router，并自己创建history

1.新建一个 history.js 文件

// 自定义history对象
import { createBrowserHistory } from 'history'
 
const history = createBrowserHistory()
 
export default history

2.然后在App.js 使用


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    


                



	

		

			

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

				
			

			

				

					weixin_58207509的博客
				

				

					11-19
					
					672
					
				

			

		

		

			
				
在React项目中有时候我们不得不在一些非组件中使用Hooks

例如在判断用户token权限过期 进行跳转页面时一般是在工具函数中实现 那么像这种情况我们如何使用函数组件里才能使用的history呢 以下我就举出几种我们会经常碰到的hooks情况进行说明

情况一 在非组件环境拿到路由信息

解决方法一:

如果产品经理说无所谓不用考虑性能只要功能出来就可以 那我们就采取最简单webApl的方法


window.location.href = '/#/login'

早点下班溜之大吉 ,要是产品经理说 

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					m0_58447769的博客
				

				

					11-18
					
					766
					
				

			

		

		

			
				
用location.href直接赋值会导致页面刷新。

如何在非组件内使用history跳转？

背景

react-router-dom中直接有Router这个包，但是它的Router 没有history属性

有如下公式：

Router + HashHistroy = HashRouter

Router + BrowerHistroy = BrowerRouter

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



思路

单独

			
		

	



              


  
              

                


	

		

			

				
					
详解react如何在组件中获取路由参数

				
			

			

				

					08-30
				

			

		

		

			
				
主要介绍了详解react如何在组件中获取路由参数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
在 React Router 中获取当前页面的路由和地址栏中的地址

				
			

			

				

					My_wife_QBL的博客
				

				

					08-03
					
					1065
					
				

			

		

		

			
				
React Router 是一个用于在 React 应用中实现路由的库。它允许开发者根据 URL 的变化来渲染不同的组件，实现单页面应用的导航功能。在使用 React Router 时，获取当前页面的路由和浏览器地址栏中的 URL 是构建动态和响应式应用的关键技能。通过使用withRouter以及，你可以轻松访问路由信息和地址栏内容。了解如何处理查询参数、响应路由变化，并遵循最佳实践，将进一步增强你在 React 开发中的能力。

			
		

	



		

			
		



	

		

			

				
					
React获取router路由路径里的相关信息

					
热门推荐

				
			

			

				

					qq_41547882的博客
				

				

					04-15
					
					1万+
					
				

			

		

		

			
				
路由：'financial-budget/:id/edit'
路径：http://localhost:3000/financial-budget/4028963b7ce8b541017ce90bed9400ca/edit

（1）用 useParams() 获取参数：
import { useParams } from 'react-router-dom';

const { id } = useParams();

console.log(useParams());  ======>  usePar

			
		

	





	

		

			

				
					
React在组件外部获取路由信息

				
			

			

				

					m0_64415782的博客
				

				

					08-01
					
					481
					
				

			

		

		

			
				
说明：为了能够在非组件环境下拿到路由信息，需要我们安装一个history包。这样就可以将history导入使用push方法来跳转或者获取信息。

			
		

	





	

		

			

				
					
react——路由

				
			

			

				

					m0_55173487的博客
				

				

					02-03
					
					5807
					
				

			

		

		

			
				
前端路由就是把不同路由对应不同的内容或页面对应展示出来。路由可以帮助我们很好的管理页面和代码，增强用户的体验感。路由模式有hash和 history 两种模式，通常用hash模式。在react中，react-router是跨平台的，内置通用组件和通用Hooks。

			
		

	





	

		

			

				
					
react项目中非组件环境下拿到路由信息

				
			

			

				

					hx_programmer的博客
				

				

					11-18
					
					888
					
				

			

		

		

			
				
问题导入

    一般我们在非组件中跳转路由,由于hooks只能在函数组件中使用,所以我们在非组件中可以用window.location.href,例如:


window.location.href = '/login'


这里有一个问题,就是使用window.location.href跳转路由会刷新页面,那么如何在不刷新页面的情况下跳转路由呢,接下来我们来说一下解决办法

背景

react-router-dom中直接有Router这个包，但是它Router 没有histo...

			
		

	





	

		

			

				
					
在使用 React Router 时，如何获取当前页面的路由或浏览器地址栏中的地址

					
最新发布

				
			

			

				

					My_wife_QBL的博客
				

				

					08-06
					
					1716
					
				

			

		

		

			
				
React Router 是一个非常强大的库，允许开发者在 React 应用中处理路由和导航。它提供了丰富的功能来管理 URL 和组件之间的关系。在开发应用时，常常需要在组件中获取当前页面的路由信息或浏览器地址栏中的地址。本文将详细介绍如何在使用 React Router 时获取这些信息，包括不同版本的 React Router 中的实现方式。

			
		

	





	

		

			

				
					
react获取当前路由

				
			

			

				

					jojo1001的博客
				

				

					10-12
					
					1万+
					
				

			

		

		

			
				
#使用useHistory
import { useLocation } from 'react-router'

const location = useLocation()

const routerName = () => {
    console.log(location.pathname)
    return location.pathname
  }




			
		

	





	

		

			

				
					
第十二章 React 路由配置，路由参数获取

				
			

			

				

					Etc.End的博客
				

				

					12-11
					
					2458
					
				

			

		

		

			
				
在React中，路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为，如点击链接或提交表单，来切换不同的组件或页面。最为常见的就是我们的导航菜单，点击菜单以后现实相对应的页面。react-router-dom是React中非常重要的一个路由管理库，对于开发React应用程序来说是很有必要学习的。在React中，react-router-dom可以帮助我们实现页面间的跳转和导航，使得单页应用能够实现多页应用类似的切换效果。

			
		

	





	

		

			

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

				
			

			

				

					qq_45000453的博客
				

				

					11-18
					
					798
					
				

			

		

		

			
				
如上图代码,我们在拦截器里面不能直接使用history进行跳转,而用location.href直接复制会导致页面刷新,那么如何在非组件内直接使用history进行页面跳转?

参考代码:https://github.com/remix-run/react-router/blob/v5/packages/react-router-dom/modules/BrowserRouter.js

首先react-router-dom中直接有Router这个包，但是它Router 没有history属性,在安装r...

			
		

	





	

		

			

				
					
React中Router的路由信息

				
			

			

				

					weixin_42181005的博客
				

				

					12-18
					
					907
					
				

			

		

		

			
				
Router 组件会创建一个上下文,并且会向上下文注入一些信息，该上下文对开发者是隐藏的 Route组件若匹配到地址，则上下文的信息会以属性传递，这里传递的信息为React中Router的路由信息
在属性中打印，我们可以看出这里的上下文主要分为history，location，match

#history#
history并不是我们平常开发中window 的history，而是react生成的一...

			
		

	





	

		

			

				
					
react中不是经过路由渲染的组件获取路由参数

				
			

			

				

					gxdzi的博客
				

				

					01-30
					
					236
					
				

			

		

		

			
				
【代码】react中不是经过路由渲染的组件获取路由参数。

			
		

	





	

		

			

				
					
React基本原理——路由

				
			

			

				

					九阴与九阳
				

				

					07-09
					
					3457
					
				

			

		

		

			
				
路由可以简单理解为导航链接。 
那么为什么需要路由呢？ 
    简单来说，在导航栏链接，不希望产生页面跳转，同时又能让用户前进或者后退，这就是路由的本质需求。 
    一句话解释为： 
    无刷新的更改地址栏地址 
    React路由就是实现这个的，基本原理是H5History API 
    那么History的API是怎么一回事情呢？ 
    原理： 
        浏览器的历

			
		

	





	

		

			

				
					
React学习五（页面路由）

				
			

			

				

					qq_44872688的博客
				

				

					03-16
					
					3111
					
				

			

		

		

			
				
文章目录一、前端路由二、hash模式三、history模式四、两种路由方式的差异五、React的页面路由模块：react-router-dom的使用1、安装2、实现路由模式的组件（决定路由模式）3、Route组件4、Router组件5、Link和NavLink组件（1）Link组件（2）NavLink组件6、Redirect组件7、Switch组件8、withRouter组件9、404视图六、react-router-dom实现路由示例

一、前端路由
1、从用户的角度看，前端路由主要实现了两个功能（使用a

			
		

	





	

		

			

				
					
路由中的meta——路由元信息

				
			

			

				

					fxinn的博客
				

				

					12-29
					
					1020
					
				

			

		

		

			
				
原文章转载：路由信息元的作用 & 用法

在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了

我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了
...

			
		

	





	

		

			

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

				
			

			

				

					m0_60823684的博客
				

				

					11-18
					
					374
					
				

			

		

		

			
				
一.背景

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中用类组件获取路由参数

				
			

			

				

					05-24
				

			

		

		

			
				
可以使用`react-router-dom`库中的`withRouter`高阶组件来获取路由参数。具体步骤如下：

1. 首先在组件中引入`withRouter`：

```javascript
import { withRouter } from 'react-router-dom';
```

2. 然后将组件通过`withRouter`包装：

```javascript
class MyComponent extends React.Component {
  // ...
}

export default withRouter(MyComponent);
```

3. 接着你就可以通过`this.props.match.params`获取路由参数了。例如，如果你的路由路径为`/user/:id`，那么可以通过`this.props.match.params.id`获取`id`参数的值。

```javascript
class MyComponent extends React.Component {
  render() {
    const { id } = this.props.match.params;

    return (
      <div>
        User ID: {id}
      </div>
    );
  }
}

export default withRouter(MyComponent);
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值