React路由拦截模式及withRouter怎么实现

发布时间：2022-08-04 09:49:22 阅读：333 作者：iii 栏目：开发技术

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本文小编为大家详细介绍“React路由拦截模式及withRouter怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“React路由拦截模式及withRouter怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、路由拦截

在前面两篇路由博客基础上，我们将ReactRouter.js的我的profile路由设置成路由拦截的：

<Route path="/profile" render={() => 
                isAuth() ? <Profile/> : <Redirect to="/login"></Redirect>
              }></Route>

React路由拦截模式及withRouter怎么实现

新建Login.js组件，写入代码：

import React, { Component } from 'react'

export default class Login extends Component {
  render() {
    return (
      <div>
          <h3>Login</h3>
          <input type="text"></input>
          <button onClick={() => {
              localStorage.setItem('token', 123  )
              this.props.history.push('/profile')
          }}>模拟登录</button>
      </div>
    )
  }
}

效果：

React路由拦截模式及withRouter怎么实现

二、路由模式

之前带#号的路由模式为哈西模式，如果想不带#号的话，可以写成如下：

React路由拦截模式及withRouter怎么实现

但是BrowserRouter没有#路径，后端如果没有对应的路径处理逻辑，就会404。

三、withRouter

如果我们在我的页面里面还有我的订单路由的话，那么在Profile.js中写入跳转的语法：

import React from 'react'

export default function Profile(props) {
  return (
    <div>
        <h2>Profile</h2>
        <div onClick={() => {
          props.history.push('/profileorder')
        }}>我的订单</div>
      </div>
  )
}