React中通过withRouter获取location等路由信息

最新推荐文章于 2024-08-10 08:42:38 发布

Erukusanze

最新推荐文章于 2024-08-10 08:42:38 发布

阅读量7.7k

点赞数 1

分类专栏： React 文章标签： widthRouter @装饰器

本文链接：https://blog.csdn.net/Juniorselk/article/details/81220705

版权

React 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这一次的项目中，想通过withRouter拿到路由信息，其实项目已经配置好了可以通过connect使用，但总想整点新花样，就自己试了试。

但是在使用装饰器的@语法时，报了错，首先是提示我项目中无法使用@withRouter这样的写法。下面是配置方法：首先安装babel-plugin-transform-decorators-legacy插件，然后在packjson里进行配置:

"plugins": [
  　"transform-decorators-legacy"
 ]

配置完继续跑项目，然后就出现了新的错误：

You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react

遇到这个错误，需要将整个组件包裹在react-touter-dom的BorwserRouter里，这样就可以在项目中正常使用装饰器@语法了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Erukusanze

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

withRouter解决react组件history、location、match丢失的问题

读心悦

05-13

3356

withRouter的作用：将react-router的 history、location、match 三个对象传入props对象上默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(’/detail’)跳转到对应路由的页面然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props

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

12-29

路由参数假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？这种场景就需要用到路由的参数功能，增加一条包含参数的路由配置。 import List from './component/list'; 注意 path 属性中的 :id 就是该路由的参数（ param ）。再来看看 List 页面的组件。 /list 对应了 list.js import React from 'react'; class List extends React.

参与评论您还未登录，请先登录后发表或查看评论

react中的withRouter

bajiao2670的博客

09-02

231

高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中. 1 // withRouter实现原理: 2 // 将组件包裹进 Route, 然后返回 3 // const withRouter = () => { 4 /...

React Native Location 使用指南

最新发布

gitblog_00080的博客

08-10

315

React Native Location 使用指南 react-native-locationReact Native plug-in that provides GPS location information项目地址:https://gitcode.com/gh_mirrors/re/react-native-location 项目介绍 React Native Location 是一个...

react withRouter

hsany330的专栏

04-22

280

高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中. // withRouter实现原理: // 将组件包裹进 Route, 然后返回 // const withRouter = () => { // return () =&...

React中withRouter的应用

weixin_42339547的博客

06-01

523

作用把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上。默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(’/detail’)跳转到对应路由的页面。然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就

React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由

此鱼非闲鱼也的博客

07-15

4711

说动态路由之前，先看看路由参数都有哪些？ 1、路由参数 1-1、history 历史记录及路由给我们的一些操作路由是根据历史记录跳转视图 history对象中提供了很多方法，便于用户再浏览历史记录中跳转。 go() 方法可以回到历史记录中的某一页面，通过与当前页面相对位置来标志。当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数，即在 history 记录中向前或者后退多少步。 history.goBack()方法可以回到历史记录中的上一个 URL。调用该方法的效果等价

【React路由】编程式路由导航和withRouter的使用——push replace

m0_67391401的博客

07-28

160

借助this.props.history对象上的API对操作路由跳转、前进、后退。

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

01-08

react非路由跳转组件获取上下文react非路由跳转组件获取上下文解决方案1.通过路由跳转2.通过属性传递3.通过withRouter包装 react非路由跳转组件获取上下文解决方案在react组件中，不是所有组件会通过路由跳转，也...

React中的路由基础知识（一级路由），5版本的！！！

weixin_48952990的博客

08-27

817

React中的路由基础知识（一级路由），5版本的！！！

React中的withRouter用法

weixin_44887137的博客

07-03

1138

withRouter的作用就是将该组件包裹进Route里面, 然后通过props就可以访问到history, location, match三个对象所以就可以依靠它进行页面跳转

使用 React Router 的 withRouter

JudithHuang的博客

03-15

1254

通过使用withRouter，我们可以方便地在任何组件中访问 React Router 提供的路由相关属性，从而实现更灵活的页面导航和状态管理。

React中 withRouter的用法(将一个非路由组件变为一个路由组件)

coucouxie的博客

09-07

848

withRouter的用法在状态组件中，我们习惯通过this.props.history.location.pathname的方式来拿到当前路由的名称，但是当一个组件不是路由组件的时候，this.props.history为undefined。因此不能拿到对应的数据。通过withRouter的方式将一个组件变为路由组件，也就是高阶组件 import {withRouter} from 'react-router-dom' class Demo extends React.Component { re

React中Router的路由信息

weixin_42181005的博客

12-18

896

Router 组件会创建一个上下文,并且会向上下文注入一些信息，该上下文对开发者是隐藏的 Route组件若匹配到地址，则上下文的信息会以属性传递，这里传递的信息为React中Router的路由信息在属性中打印，我们可以看出这里的上下文主要分为history，location，match #history# history并不是我们平常开发中window 的history，而是react生成的一...

react中@withrouter_React系列十 - 高阶组件以及组件补充

weixin_39769187的博客

11-21

492

源自：coderwhy一. 高阶组件1.1. 认识高阶组件什么是高阶组件呢？相信很多同学都听说过，也用过高阶函数，它们非常相似，所以我们可以先来回顾一下什么是高阶函数。高阶函数的维基百科定义：至少满足以下条件之一：接受一个或多个函数作为输入；输出一个函数；JavaScript中比较常见的filter、map、reduce都是高阶函数。那么说明是高阶组件呢？高阶组件的英文是 Higher-Ord...

React之withRouter的作用和应用

楠姐的博客

08-23

2050

1. withRouter的作用 withRouter是不通过路由跳转的组件，将history、locattion、math放在页面的props 对象中，默认情况下，必须是经过路由匹配的组件才可以使用this.props，才会拥有路由的参数，一般首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法 2. 应用设置withRouter很简单只需要两步：（

React路由

m0_62118859的博客

05-02

827

目录 1. React路由-基本使用 2. React路由-Router模式 3. React路由-Link&NavLink组件 4. React路由-Route组件 5. React路由-路由匹配模式模糊匹配精确匹配 6. React路由-执行过程 7. React路由-Switch组件&404页面 8. React路由-编程式导航 1. React路由-基本使用能够使用 react 路由切换页面内容： 2021.11月初，react-r...

react 类组件怎么获取路由参数

05-24

在 React 类组件中获取路由参数，需要使用 `react-router-dom` 中提供的 `withRouter` 高阶组件。首先，确保你的 React 项目中已经安装了 `react-router-dom`，可以使用以下命令进行安装： ``` npm install react-router-dom ``` 接下来，在需要获取路由参数的类组件中，使用 `withRouter` 包裹组件，并通过 `this.props.match.params` 获取路由参数。例如，假设你的路由地址为 `/users/:userId`，你可以通过以下方式获取路由参数 `userId`： ```jsx import React from 'react'; import { withRouter } from 'react-router-dom'; class UserPage extends React.Component { render() { const userId = this.props.match.params.userId; return <div>当前用户 ID：{userId}</div>; } } export default withRouter(UserPage); ``` 这样，就可以在类组件中获取到路由参数了。需要注意的是，使用 `withRouter` 高阶组件后，组件的 props 中会注入三个属性：`match`、`location` 和 `history`，其中 `match` 对象包含了路由参数等信息。