如何将 React Router location prop 传递给组件?

2024-04-22

我试图弄清楚如何将 React Router 的 location 属性传递给组件。

我有一个这样定义的路线:

<Route
  path="placeholder"
  render={(props) => <Navigation {...props} />}
/>

在我的导航组件中我这样做console.log(this.props);在render方法中只得到一个空对象。是什么赋予了? location prop 不是应该自动提供给 Route 内的任何组件吗?

顺便说一下,我使用的是react-router-dom版本4.2.2.


您需要用以下内容包装您的组件withRouter https://reacttraining.com/react-router/web/api/withRouter为了注入match, history and location在你的组件道具中。

import { withRouter } from 'react-router-dom';
class Navigation extends React.Component {

  render() {
    const { match, location, history } = this.props
    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Navigation)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 React Router location prop 传递给组件? 的相关文章

随机推荐

  • Visual Studio 2012 - 条件编译符号设置的位置

    我一生都找不到要在 Visual Studio 2012 中输入项目的条件编译符号的字段 我是这个功能的新手 所以我不知道它是否已被重命名为其他名称 但是我正在努力追随本指南 http www codeproject com Article
  • AWS Step Functions 等待 CodeBuild 完成

    如何等待 CodeBuild 在 Step Functions 状态机内完成 我现在能想到的唯一等待是使用循环和计时器 就像下面的流程一样 但这是唯一的方法吗 没有 WaitForBuild 操作或类似的操作吗 拼写错误 BatchGetB
  • ASP.NET MVC 是否为区域创建默认路由

    我的 MVC 3 应用程序 身份验证 和 用户 中有几个区域 我在用Phil Haacks 路由调试工具 http haacked com archive 2008 03 13 url routing debugger aspx查看我的路线
  • 如果构建是源代码外的,CMake 无法找出标头依赖项?

    我一直在使用 CMake 来管理一个单独的小型 c 项目 基于 Unix Makefile 并决定将其转换为更有组织的源代码外构建 但是 当它超出源时 通过执行cmake 在 build 中 我的标头不再是其源文件的依赖项 如果我只是从顶层
  • 分割车牌字符

    我在从车牌图像中分割字符时遇到问题 我应用了以下方法来提取车牌字符 车牌图像的自适应阈值 选择具有特定纵横比的轮廓 如果车牌图像中有任何阴影 如附件中所示 由于二值化不正确 我无法正确分割字符 图像中的阴影合并图像中的相邻字符 我已经对具有
  • 如何使用release编译一些依赖项

    我想使用 dev 配置文件构建我的 Rust 应用程序 但使用 release 配置文件构建一些依赖项 因为否则它们真的很慢 如何有选择地为我的板条箱依赖项指定配置文件 Cargo 能够覆盖特定包裹的配置文件 来自参考 https doc
  • 仅过滤有错误的请求 - Google Chrome 网络

    如何在 google chrome 网络开发工具中仅过滤有错误的请求 我找到了自己的方法 所以它不是官方的 可能存在其他方法 选项 1 过滤 HTTP 状态代码 您可以按状态代码过滤响应 这是一个有用的列表 https httpstatus
  • 使用 java swing 显示两个重叠的对话框

    我遇到一种情况 我显示一个对话框 用户必须填写一些菜单 然后按 确定 它工作正常 但现在我在这个对话框上有另一个按钮 如果用户想要添加一些特定的值 我希望弹出另一个对话框 用户在其中填写附加值 然后按 确定 该对话框消失 用户返回主窗口对话
  • 用 ruby​​ 制作闪烁的控制台消息

    0 upto 9 do STDOUT print Flash sleep 0 5 STDOUT print b b b b b b 6 backspaces the length of Flash sleep 0 5 end 这段代码不起作
  • 错误:[电子邮件受保护]:未知版本:mountain_lion

    关注了这个tutorial https github com thoughtbot capybara webkit wiki Installing Qt and compiling capybara webkit macos high si
  • 通过 URL HeadlessChrome 进行 Selenium 基本身份验证(在 Linux 服务器上)

    在我的 Selenium 测试中 我需要测试一个使用基本 Authen 的网页 知道我正在使用 Chrome Headless Java 和 Selenium WebDriver 在我的 本地 机器上它可以完美地使用driver get h
  • 如何在 mac os x 上安装 Image::Magick?

    我尝试用brew安装 brew install imagemagick 安装似乎已成功完成 然而 当尝试 use Image Magick 我收到以下错误消息 Can t locate Image Magick pm in INC 我不太了
  • 透明颜色 Tkinter

    是否可以将框架背景或任何其他小部件的颜色更改为透明浅蓝色或任何其他透明颜色 是的 有办法 不幸的是 它仅适用于整个窗口 窗口和所有子窗口小部件 这是我不久前写的一个小演示 除其他外 它可以满足您的需求 透明窗口演示 import Tkint
  • 将枚举类型转换为整数,反之亦然[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有一个枚举 enum MYENUM VAL 1 0 VAL 2 VAL 3 以及两个分别以整数和枚举作为参数的函数 void MyInt
  • 使用 R 过滤列并重复比较成对的两列

    Given a df如下 对于每年的实际值和预测值 我需要检查今年的实际值和预测值与上一年的实际值相比是否具有相同的方向 df lt structure list code c M0000273 M0000357 M0000545 name
  • dplyr 中的函数和非标准评估

    我刚刚读完 用 dplyr 编程 https dplyr tidyverse org articles programming html and 以编程方式定义美学映射 https ggplot2 tidyverse org referen
  • Mongoose,MongoDB:如何在push()之后保存()文档?

    Schema var Post mongoose Schema title String comments user Number text String Code oldCount myPost comments length for e
  • SPDY 与保持活动连接上的 http 多路复用有何不同

    HTTP 1 1 支持保持活动连接 在发送 Connection close 之前连接不会关闭 那么 如果浏览器 本例中是firefox 启用了network http pipelined 并且增加了network http pipelin
  • clojure 的 emacs slime-connect 版本不会查找 $CLASSPATH

    我需要将 clojure 函数与 slime connect 一起使用 我将所有库都放在 CLASSPATH 中 据我了解这个问题 https stackoverflow com questions 3376840 clojure clas
  • 如何将 React Router location prop 传递给组件?

    我试图弄清楚如何将 React Router 的 location 属性传递给组件 我有一个这样定义的路线