React路由拦截模式及withRouter示例详解
更新时间：2022年08月03日 16:07:29 作者：你华还是你华
这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一、路由拦截
在前面两篇 路由博客基础上，我们将ReactRouter.js的我的profile路由设置成路由拦截的：
<Route path="/profile" render={() =>
isAuth() ? <Profile/> : <Redirect to="/login"></Redirect>
}></Route>
新建Login.js组件，写入代码：
import React, { Component } from 'react'
export default class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
<input type="text"></input>
<button onClick={() => {
localStorage.setItem('token', 123 )
this.props.history.push('/profile')
}}>模拟登录</button>
</div>
)
}
}
效果：
二、路由模式
之前带#号的路由模式为哈西模式，如果想不带#号的话，可以写成如下：
但是BrowserRouter没有#路径，后端如果没有对应的路径处理逻辑，就会404。
三、withRouter
如果我们在我的页面里面还有我的订单路由的话，那么在Profile.js中写入跳转的语法：
import React from 'react'
export default function Profile(props) {
return (
<div>
<h1>Profile</h1>
<div onClick={() => {
props.history.push('/profileorder')
}}>我的订单</div>
</div>
)
}
可以看到报错了，那我们之前那种写法不生效了吗。其实跟路由的创建有关系，之前是直接将组件用component属性直接传了过去，所以props有history对象，但是这次我们是采用的render将组件在立即函数中实例化了，不传进去：
所以在这里props接收不到任何东西，是非常正常的。在使用render的路由时，我们可以这样传参：
通过传props那么子组件中将有路由的一些属性，就可以做跳转。如果在路由组件上不传props的话，那么将使用withRouter进行跳转。将props删除：
可以看到即使render的路由父组件不传props，我们使用withRouter，也能够进行路由的跳转。
以上就是React路由拦截模式及withRouter示例详解的详细内容，更多关于React路由拦截模式withRouter的资料请关注脚本之家其它相关文章！
相关文章
forwardRef 中React父组件控制子组件的实现代码
forwardRef 用于拿到父组件传入的 ref 属性，这样在父组件便能通过 ref 控制子组件，这篇文章主要介绍了forwardRef - React父组件控制子组件的实现代码,需要的朋友可以参考下2024-01-01
这篇文章主要为大家介绍了react+antd+upload结合使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了React移动端项目之pdf预览问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）
本篇文章主要介绍了React-Native解决键盘遮挡问题（Keyboard遮挡问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家介绍了React 数据获取与性能优化方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在React函数式组件中，我们可以通过useState()来创建state，这种state创建方式会给我们返回两个东西state和setState()。2023-04-04
这篇文章主要为大家介绍了基于antd的autocomplete的二次封装查询示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家详细介绍了在react中使用mockjs的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家介绍了可定制React自动完成搜索组件Turnstone实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论