如何使用react-router通过路由将props传递给react组件?

2024-05-02

我想将一些道具传递给 IndexRoute 上的组件。下面是我的代码片段:

render(root: Element) {
    const { store, params } = this as any;
    ReactDOM.render(
          <Provider {...{ store }} >
              <Router history={browserHistory}>
                  <Route path={window.location.pathname} component={App}>
                    <IndexRoute component={Step1} />
                    <Route path="step1" component={() => (<Step1 params={params} />)} />
                    <Route path="step1" component={() => (<Step2 params={params} />)} />
                  </Route>
            </Router>
          </Provider>
   , root);

}

//App Component
import * as React from 'react';


export var App: any = ({children}) => (

    <div>
        <div>{children}</div>
    </div>
)

在初始加载时,我可以将步骤 1 作为子项加载,但我想将一些道具从路由部分传递到组件。

我怎样才能得到这个?

请指导我。

谢谢, 维杰


使用克隆元素cloneWithProps()

var newStep1 = cloneWithProps(Step1, {prop1: 'value', prop2: 'value'});// add props

并将其传递给<IndexRoute />

<IndexRoute component={newStep1} />

这应该有效..

参考 https://facebook.github.io/react/docs/clone-with-props.html

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

如何使用react-router通过路由将props传递给react组件? 的相关文章

  • 如何将类组件中的 props 发送到功能组件?

    我是 ReactJS 的初学者 需要知道如何将一个页面中的 props 值发送到另一个页面 道具位于第一页上我可以获取类组件值如何获取另一页中的值 提前致谢 墙色 jsx import React Component from react
  • 在 React.js 中有条件地设置 html 属性

    我在为 React 中的单选按钮组件设置默认选项时遇到了令人惊讶的困难 这是我的RadioToggle成分 jsx React DOM var RadioToggle React createClass render function va
  • Firebase setDoc() 不创建文档

    我正在使用 auth 创建一个新用户 该用户正在工作 然后使用新创建的 uid 创建一个具有相同内容的新文档 const currentUser await auth createUserWithEmailAndPassword email
  • 避免对象突变

    我正在使用 React 和 ES6 所以我遇到了以下情况 我有一个带有对象数组的状态假设a id 1 value 1 id 2 value 2 处于以下状态Object A 然后我将列表传递给Object B通过道具 Object B 在构
  • 如何在React中处理多个路由器

    假设我们有一个网络应用程序 它通常有很多视图 例如索引页面 管理面板 帮助页面 联系人等 我在主index js 中使用react router dom 来处理它们 它工作得很好 但是现在我在开发管理面板时遇到了问题 它是 index js
  • Recoil 中的动态原子键

    我正在尝试创建一个动态表单 其中表单输入字段是根据 API 返回的数据呈现的 由于atom需要有一个唯一的键 我尝试将它包装在一个函数中 但是每次我更新字段值或重新安装组件 尝试更改选项卡 时 我都会收到一条警告 我在这里做了一个小的运行示
  • Material UI 组件中的媒体查询

    我在 React js 项目中使用 Material UI 组件 出于某种原因 我需要对某些组件进行自定义 以使其根据屏幕宽度进行响应 我已经添加了media query并将其作为组件中的样式属性传递 但不起作用 知道吗 我正在使用这样的代
  • Typescript:如何从react-bootstrap导入特定组件

    早些时候我的应用程序位于ReactJs React bootstrap 现在我正在使用Typescript ReactJs React bootstrap 为了减少生产应用程序的大小 之前我曾经使用 导入react bootstrap组件i
  • 发布到 npm 时出现问题

    所以我尝试使用 React 构建一个开源项目并将其推送到 npm 问题是 我的组件虽然在测试环境中运行良好 安装到其他组件 但当我将其发布到 npm 并下载包并尝试访问它时 它给了我一个错误 这是代码的一个小示例 import React
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • 在电子生成器反应电子应用程序后,在 Windows 中出现空白屏幕

    在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 这是package json 在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 name SmallBusinessManagement version 0 1
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒
  • 如何在ReactJS中定义常量

    我有一个将文本映射到字母的函数 sizeToLetterMap function return small square s large square q thumbnail t small 240 m small 320 n medium
  • useEffect 中的 setTimeout 函数输出缓存的状态值

    这很简单 我正在使用 Redux 来管理我的状态 我有一个setTimeout函数在一个useEffect功能 The setTimeout超时值为50000ms 我想要 SetTimeout 处理程序做什么 After 50000ms t
  • React 组件等待所需的 props 渲染

    我正在父组件内部声明一个组件 我想在一个文件中建立特定的道具 然后在父组件中 我希望能够同时为子组件建立其他道具 因为它们是共享属性 在大多数情况下 我的问题是 子组件尝试渲染并失败 因为首先没有建立所需的道具类型 有没有办法告诉子组件等待
  • MUI DatePicker + date-fns 本地化问题

    当我使用MUI时出现这个问题日期选择器 with 本地化提供商 and 适配器日期Fns with 匈牙利 local
  • Ant设计文件上传中使用customRequest

    我正在使用 Axios 来处理文件上传 我遇到显示文件上传进度的问题 我使用的文件上传视图是 图片卡 HTML
  • React router v6 和路由内页面的相关链接

    您好 我正在尝试使用 React Router 将项目更新到 v6 我了解了基础知识 但在相关链接方面遇到了困难 我们有一个页面 通过 id 呈现给定项目的参考文档 该文档可以使用同级 ID 链接到其他 同级 材料 换句话说 用户可以在文档
  • 如何使用 htaccess 将所有请求重定向到反应或角度索引?

    我正在使用react router 在react 中创建一个应用程序 早些时候 我对 Angular 做了同样的事情 但在这两种情况下 如果用户为 URL 添加书签并直接加载它 它将显示 404 错误 我们可以在 htaccess 中创建这
  • 在 React 中使用 .less 文件

    我正在尝试将 less 文件与极简主义 React 应用程序一起使用 使用创建反应应用程序 我已经添加less and less loader to my 包 json以及我的模块规则webpack config js文件 然而 类引用并未

随机推荐

  • 用于反恶意软件代码的类 Aho-Corasick 算法

    有没有类似的算法阿霍 科拉西克 http en wikipedia org wiki Aho E2 80 93Corasick string matching algorithm 它可以同时匹配一组模式并适用于反恶意软件比较 所有已知的商业
  • PHP:正则表达式删除`a`或`–?

    我使用这个正则表达式从字符串输入中删除所有标点符号 pg url preg replace W pg url 但有些符号或特殊字符我无法删除它们 例如 当我将其传递到我的数据库注入时 它会变成 or 我怎样才能摆脱这些奇怪的东西 Thank
  • 如何使用 Laravel 查询生成器在 WHERE 条件周围添加括号

    我使用 Laravel 查询构建器根据用户的过滤器选择动态过滤数据 query DB table readings foreach selections as selection query gt orWhere id selection
  • MySQL使用BLOB的二进制存储VS OS文件系统:大文件、大数量、大问题

    我正在运行的版本 基本上 最新的一切 PHP 5 3 1MySQL 5 1 41阿帕奇 2 2 14操作系统 CentOS 最新 情况是这样的 我有数千个非常重要的文档 从客户合同到语音签名 客户对合同的授权录音 文件类型包括但不限于jpg
  • 将 React 值从子级传递给父级

    我正在努力解决一些可能非常简单的事情 我的父组件是一个搜索小部件 它需要使用在单独的抽屉组件中定义的过滤器 目前 用户可以输入搜索查询 该查询会调用 API 并且需要根据抽屉组件中的选择器来过滤结果 但是 我无法将父母和孩子联系起来以实现这
  • 如何在 ruby​​ 中后台运行多个外部命令

    给定这个 Unix shell 脚本 test sh bin sh sleep 2 sleep 5 sleep 1 wait 时间 test sh real 0m5 008s user 0m0 040s sys 0m0 000s 如何在 U
  • Java HashMap - 深拷贝

    我只是想找出如何进行深层复制的最佳解决方案HashMap 该映射中没有对象实现Cloneable 我想找到比序列化和反序列化更好的解决方案 看一眼深度克隆 在 Google Code 上您可以找到一个库 你可以阅读它https github
  • 布尔类?

    前几天我注意到我可以调用 boolean class 但不能调用 integer class 或其他基元 是什么让布尔值如此特别 注意 我说的是 boolean class 而不是 Boolean class 这是有道理的 呃 我尝试了in
  • CLR 2.0 和 CLR 4.0 之间的区别

    我阅读了无数关于 C 4 0 新功能的博客 帖子和 StackOverflow 问题 甚至新的 WPF 4 0 功能也开始公开出现 我找不到但想知道的内容 从 C WPF 开发人员的角度来看 CLR 4 0 有哪些主要变化 CLR 4 0
  • 是否保证 HttpSessionListener.sessionCreated() 在任何其他线程访问新会话之前完成?

    我正在尝试将值缓存在ConcurrentHashMap in the Session 为了避免竞争条件并确保在任何线程尝试使用我的地图之前创建它 我使用HttpSessionListener sessionCreated 将地图添加到Ses
  • Hive中group by后是否可以连接字符串字段

    我正在评估 Hive 需要在 group by 之后进行一些字符串字段连接 我找到了一个名为 concat ws 的函数 但看起来我必须显式列出所有要连接的值 我想知道是否可以在 Hive 中使用 concat ws 做这样的事情 这是一个
  • Actionscript 3主类是根,但不允许动画虚拟相机

    我最近开始使用 Actionscript 3 学习 Animate CC 我正在尝试使用 Animate 的 虚拟相机 功能 为我提供一个可以平移 旋转和缩放游戏的相机 当根没有子类时 很容易实现 Camera 例如 您可以在屏幕上放置一个
  • IntelliJ Idea 15 显示依赖包和项目包

    IntelliJ Idea 15 CE 在项目的包视图中显示来自库 依赖项的包 仅当项目的根包与某些依赖项的根包相同时才会发生这种情况 对于前 我的项目的根包是org 所以所有的依赖关系也有org包状org apache logging也被
  • 如何在 React 中使用原生 Node.js 插件

    我有一个反应项目 我想在其中使用this https github com svenpaulsen node ts3sdk client原生 Node js 插件 它是 C SDK 的包装器 我过去曾在 Electron 项目中成功使用过此
  • Jenkins 的 Gerrit 触发器找不到任何要构建的修订

    我在使用 Jenkins Gerrit 时遇到问题 这是我到目前为止得到的 Jenkins 中的 Gerrit 触发器配置似乎没问题 当我推送新的变更集时 Jenkins 构建就会启动 我用过这个 Jenkins Gerrit 触发器问题的
  • 旋转时键盘隐藏

    我正在开发 iPad 应用程序 在其中一个视图中 我有一个子视图 它在按钮点击事件时出现和消失 子视图包含一个UITextView 默认情况下 我将其设置为第一响应者 以便在视图出现时键盘立即出现 子视图也会消失UIKeyboardWill
  • 尝试添加到链接列表时,Valgrind 无限循环“信号 11 被丢弃”

    我正在尝试用 C 创建一个简单的单链表 并且在 Valgrind 中运行程序时遇到无限的 Singal 11 被删除 循环 我的 h 文件 ifndef TEST H define TEST H struct fruit char name
  • 使用 Qt 进行拖放:悬停时了解目标应用程序 - 这可能吗?

    我目前正在探索从 Qt 应用程序拖放到未知目标应用程序的可能性 问题是 Qt 应用程序是否可以接收有关即将接收 drop 的应用程序的信息 例如进程名称或标题 一个 虚构的 示例可以是将绘图从 Qt 窗口拖动到文本编辑器或电子表格编辑器 在
  • 通用存储库是否需要一个基实体类才能在任何地方应用?

    我正在使用 ASP NET MVC 创建一个 Intranet 网站洋葱架构 我一直在实现存储库模式 但遇到了困难 假设我有一个包含 IDDocument 的文档表 那么这是我的存储库 只有一种方法 class Repository
  • 如何使用react-router通过路由将props传递给react组件?

    我想将一些道具传递给 IndexRoute 上的组件 下面是我的代码片段 render root Element const store params this as any ReactDOM render