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

最新推荐文章于 2023-01-28 21:45:02 发布
VIP文章 最新推荐文章于 2023-01-28 21:45:02 发布
阅读量801 收藏 2
点赞数 3
分类专栏： react 文章标签： react hooks react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hx_programmer/article/details/121409356
版权

问题导入

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

window.location.href = '/login'

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

背景

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

有如下公式：

Router + HashHistroy = HashRouter

Router + BrowerHistroy = BrowerRouter

详情参考github

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

接下来我们就来说说怎么创建

封装history组件

第一步:导入createBrowserHistory

import { createBrowserHistory } from 'history'

第二步:创建history对象并导出


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  hx_programmer
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

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

				
			

			

				

					08-30
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
react-router在非组件中使用history对象

				
			

			

				

					Suk__的博客
				

				

					01-05
					
					357
					
				

			

		

		

			
				
然后我们就可以在其它js文件里导入我们自己创建的history对象即可使用。然后在将history对象注入Router组件。

			
		

	



                


  
              

                


	

		

			

				
					
react—非组件中使用history

				
			

			

				

					m0_52765288的博客
				

				

					11-19
					
					1163
					
				

			

		

		

			
				
1.问题场景


我们对token失效进行处理时，需要使用到history来进行跳转，但是在react中history是由useHistory调用得来的，所以我需要在非组件中拿到history对象进行使用


2.操作步骤

2-1、utils/history.js进行封装


import { createBrowserHistory } from 'history'
export default createBrowserHistory()


2-2、app.js一级路由配置进行全局传入

此时我们的

			
		

	





	

		

			

				
					
React如何将组件渲染到指定DOM节点详解

				
			

			

				

					08-29
				

			

		

		

			
				
主要给大家介绍了关于React如何将组件渲染到指定DOM节点的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习下吧。

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					11-28
				

			

		

		

			
				
前言
大家应该都有所体会，我们在一般应用都有跨tab跳转的需求， 这就需要特别处理下路由，所以 下面是使用react-navigation作为路由组件的一种方式.
具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页.
方法如下：
首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件.

const Components = {
 HomeTwo: { scree

			
		

	





	

		

			

				
					
React 使用两种路由（hash|history）模式 调用实例 createHashHistory、createBrowserHistory 实现跳转页面

				
			

			

				

					韩旭的博客
				

				

					10-12
					
					6203
					
				

			

		

		

			
				
文章目录一、组件props跳转路由二、在 request.ts 无法获取到 props 的页面调用路由实例实现路由跳转2.1、hash示例2.2、history实例
一、组件props跳转路由
路由嵌套后我们就可以在嵌套的子组件中使用 props 去调用 history 实现路由跳转

如下
// 跳转登录页
props.history.push("/login")


二、在 request.ts 无法获取到 props 的页面调用路由实例实现路由跳转
首先我们还是要分清我们的路由模式




hash（

			
		

	





	

		

			

				
					
BrowserRoute服务器配置

				
			

			

				

					weixin_30487701的博客
				

				

					12-17
					
					2730
					
				

			

		

		

			
				
BrowserRoute服务器配置
在React项目中我们经常需要采用React-Router来配置我们的页面路由，React-Router 是建立在 history 之上的，常见的history路由方案有三种形式，分别是：
1）hashHistory
2）browserHistory
3）createMemoryHistory
hashHistory使用 URL 中的 hash（#）...

			
		

	





	

		

			

				
					
React项目--登录，注册，主页---ant design

				
			

			

				

					GAVINVSwithCAILE的博客
				

				

					01-28
					
					1809
					
				

			

		

		

			
				
React,login,register,home,pages,src,App.js,index.js,
node_modules,react,react-dom,react-router-dom, Layout,Alert ,'antd',$,React项目--登录，注册，主页---ant design,bind,localStorage,Layout,Header,Footer,

			
		

	





	

		

			

				
					
react history 历史页面管理

				
			

			

				

					kangkang_style的博客
				

				

					03-26
					
					6540
					
				

			

		

		

			
				
history是为React Router提供核心功能的包。
它能轻松地在客户端为项目添加基于location的导航。


1. 安装
	npm install --save history
2. 类型
	import { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history'
	存在三类histo...

			
		

	





	

		

			

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

				
			

			

				

					tomotoCoder的博客
				

				

					10-15
					
					2367
					
				

			

		

		

			
				
前言：在写项目时需要在非组件的js文件里 进行路由跳转，比如axios里请求响应拦截后做路由跳转, 但是又不能获取到this.props.history， 那怎么才能获取到history对象呢？

1.创建一个 utils/history.js


import { createBrowserHistory } from 'history';

export default  createBrowserHistory();

2.主入口index.js


import ReactDOM from 're.

			
		

	





	

		

			

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

				
			

			

				

					01-08
				

			

		

		

			
				
react非路由跳转组件获取上下文react非路由跳转组件获取上下文解决方案1.通过路由跳转2.通过属性传递3.通过withRouter包装
react非路由跳转组件获取上下文解决方案
在react组件中，不是所有组件会通过路由跳转，也需要抓取路由上下文时，解决方案
我们可以看到user组件在React Developer Tools管理工具中的props属性中是存在history，location，match这些上下文

  ,
  document.getElementById(‘root’)
  //这是我们之前的代码，显然App组件没有通过路由跳转
)

import {Browser

			
		

	





	

		

			

				
					
React-router v6 在 Class 组件和非组件代码中的正确用法

				
			

			

				

					Ryan的博客
				

				

					03-20
					
					4564
					
				

			

		

		

			
				
最近内部正在开发的 react 项目 react-router-dom 全线升级到了 v6 版本，v6 版本中很多 API 进行了重构变更，导致很多旧写法失效，下面记录一下 history/hash 模块在v6中的用法。

// IE polyfill
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/stable'
import './styles/index.less'

import HashHistory from 'histor.

			
		

	





	

		

			

				
					
React-router-dom 学习笔记（二） API

				
			

			

				

					qq_35437531的博客
				

				

					11-20
					
					367
					
				

			

		

		

			
				
<BrowserRouter>

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。


import { BrowserRouter } from 'react-router-dom';

<BrowserRouter
 ...

			
		

	





	

		

			

				
					
React require(“history”).createBrowserHistory` instead of `require(“history/createBrowserHistory”)...

				
			

			

				

					weixin_30869099的博客
				

				

					08-29
					
					2685
					
				

			

		

		

			
				
看见bug惊讶，代码中并没有require(“history/createBrowserHistory”)
//原有代码为
import createBrowserHistory from "history/createBrowserHistory";
const customHistory = createBrowserHistory();
bug解决方式为
import {creat...

			
		

	





	

		

			

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

				
			

			

				

					留着鼻涕敲代码
				

				

					11-19
					
					754
					
				

			

		

		

			
				
1.如何拿到路由信息，
通常情况下都是在组件情况下通过useHistory拿到路由信息的
但是有个很严重的问题，useHistory这个方法只能只能在组件环境下才能使用，如果非组件将无法使用

2. Router包 与 HashRouter/BrowerRouter的区别
react-router-dom中是有Router这个包，但是它Router 没有history属性
简单理解就是：

Router + HashHistroy = HashRouter
Router + BrowerHistroy = 

			
		

	





	

		

			

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

				
			

			

				

					GZZ__z的博客
				

				

					11-19
					
					1037
					
				

			

		

		

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

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

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



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

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

有如下公式：

Router + HashHistroy = HashRouter

Rout.

			
		

	





	

		

			

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

				
			

			

				

					m0_60823684的博客
				

				

					11-18
					
					342
					
				

			

		

		

			
				
一.背景

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

			
		

	





	

		

			

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

				
			

			

				

					qq_45619095的博客
				

				

					04-29
					
					366
					
				

			

		

		

			
				
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如何在非组件环境下使用history和调用dispatch

				
			

			

				

					qq_60292609的博客
				

				

					11-20
					
					1423
					
				

			

		

		

			
				
在非组件下使用 history
当我们使用了 HashRouter或者BrowerRouter,我们需要知道以下几点

Router + HashHistroy = HashRouter
Router + BrowerHistroy = BrowerRouter

在 react[email protected]中 本身就提供了Router,并且还提供了 history这个包,
解决步骤:

这里我是对路由方面也进行了一个更改
如果只是单纯想使用 history , 可以直接创建 history(步骤: 2

			
		

	





	

		

			

				
					
react函数组件中如何拿到路由路径中传的id

					
最新发布

				
			

			

				

					06-03
				

			

		

		

			
				
要在 React 函数组件中获取路由路径中传递的 id，需要使用 React Router 提供的 `useParams` 钩子函数。首先需要在组件中引入 `useParams`：

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

然后在组件中使用 `useParams` 获取路由参数：

```javascript
function MyComponent() {
  const { id } = useParams();

  // 在组件中可以使用 id 来进行相应的操作
  // ...
}
```

其中，`id` 对应的是路由路径中传递的参数名称，例如路由路径为 `"/users/:id"`，则可以通过 `useParams` 获取到 `id` 参数的值。

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值