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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在Create React App中使用CSS Modules的方法示例
本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。2019-01-01
React 正确使用useCallback useMemo的方式
这篇文章主要介绍了React 正确使用useCallback useMemo的方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
react+antd select下拉框实现模糊搜索匹配的示例代码
我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了ReactNative 状态管理redux使用详解2023-03-03
React Native中TabBarIOS的简单使用方法示例
最近在学习过程中遇到了很多问题,TabBarIOS的使用就是一个，所以下面这篇文章主要给大家介绍了关于React Native中TabBarIOS简单使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-10-10
详解使用webpack+electron+reactJs开发windows桌面应用
这篇文章主要介绍了详解使用webpack+electron+reactJs开发windows桌面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
vite + react +typescript 环境搭建小白入门教程
这篇文章主要介绍了vite + react +typescript 环境搭建小白入门教程,本文通过示例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了详解React 的几种条件渲染以及选择，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了React实现评论的添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
最新评论