react组件获取不到路由信息

缺乏、安全感 2023-01-08 12:22 110阅读 0赞

添加如下的代码

import {  withRouter } from "react-router-dom"
    // .....
    export default withRouter(AuthRoute)

之前是使用 @withRouter 这样的装饰器，但是项目一直报错

Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled

网上百度了很久，没办法解决。后来就采用这个方法，效果是一样的

import axios from 'axios'
    import React from 'react'
    import {  withRouter } from "react-router-dom"
    
    class AuthRoute extends React.Component { 
      componentDidMount() { 
        const publicList = ['/login', '/register']
        const pathname = this.props.location.pathname
        if (publicList.indexOf(pathname) > -1) { 
          return null
        }
        // 获取用户信息
        axios.get('/user/info').then(res => { 
          if (res.status === 200) { 
            if (res.data.code === 0) { 
              // TODO
            } else { 
              this.props.history.push('/login')
            }
          }
        })
      }
      render() { 
        return <></>
      }
    }
    
    export default withRouter(AuthRoute)

withRouter的作用就是, 如果某个东西不是一个Router, 但要依靠它去跳转一个页面, 比如点击页面的图片, 返回首页, 这时候就可以使用withRouter。

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue router 路由跳转获取不到参数

问题：路由传参一直不能获取到参数, 未出现报错原因：混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path 代码

喜欢ヅ旅行/ 2023年10月15日 13:58/ 0 赞/ 35 阅读

相关 Elasticsearch 文档到分片路由算法查询文档到分片路由信息

根据文档ID计算HASH值，然后对主分片数量进行取模，得到对应的主分片，也可以使用指定参数，进行HASH值的计算，让特定的文档落在特定的分片上。添加测试文档

比眉伴天荒/ 2023年01月16日 03:22/ 0 赞/ 136 阅读

相关 react组件获取不到路由信息

添加如下的代码 import { withRouter } from "react-router-dom" // ..... export defa

缺乏、安全感/ 2023年01月08日 12:22/ 0 赞/ 111 阅读

相关 React路由

React路由安装 react-router相关标签简单路由跳转嵌套路由跳转动态链接路由匹配优化重定向路由传

梦里梦外;/ 2022年10月22日 07:33/ 0 赞/ 219 阅读

相关 REACT_react路由配置

路由配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

向右看齐/ 2022年10月11日 00:56/ 0 赞/ 274 阅读

相关 React 路由

React 路由 [尚硅谷 2021 版 React 技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）][2021 _ React] 路由 SPA 1.

系统管理员/ 2022年10月07日 08:51/ 0 赞/ 193 阅读

相关 React-router（4）props 路由信息

4、props [DEMO地址][DEMO] > 参考 3.props.js react-router 的路由信息，都存储在组件的 props 里。之所以是存在

港控/mmm°/ 2022年05月30日 04:09/ 0 赞/ 326 阅读

相关 React 路由配置

转载https://blog.csdn.net/We\_jia/article/details/89353729\%E4%B8%80%E3%80%81%E8%B7%AF%E7%

╰半橙微兮°/ 2021年12月11日 10:49/ 0 赞/ 457 阅读

相关 vue组件及路由

Vue.js 组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的

女爷i/ 2021年10月20日 01:31/ 0 赞/ 365 阅读

相关 React路由

路由路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。实现spa应用： 1. 整个项目只有一个完整页面

末蓝、/ 2021年07月25日 01:40/ 0 赞/ 542 阅读