React.js 通过 Router 传递参数,而不是在 URL 中

2024-03-31

您好,我想从一个页面移动到另一页面并传递参数search and type。如果 URL 中没有这些参数,我可以使用 React Router 来实现此目的吗?

我正在看这个https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments以及使用的解决方案<RouteHandler {...this.props}/>但在我将参数传递给 url 之前它不起作用。

有什么解决办法吗?

编辑1.路线:

<Route name="app" path="/" handler={App}>
    <Route name="realestates" handler={RealEstatesPage}/>
    <Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/>
    <Route name="realestate" handler={RealEstateDetails}/>
    <DefaultRoute handler={MainPage}/>
</Route>

您提到的链接概述了两种不同的策略。首先,动态段只是参数化 URL,其中参数作为 URL 路径的一部分而不是在查询字符串中发送。因此,这些需要公开可见。

其次,可以使用道具。这是唯一受支持的“在幕后”传递信息的选项。此外,它是 React 中的首选方法。问题是,这种情况会在哪里发生?

一种选择是从顶层将值传递到内部Router.run()。上面的链接概述了这一点,每个嵌套处理程序都明确地向下传递道具,例如<RouteHandler search={this.props.search} />,或批发使用传播属性 http://facebook.github.io/react/docs/jsx-spread.html like <RouteHandler {...props} />.

由于您只希望它发生在页面的子集上,因此您可以使用嵌套路由,其中​​父路由处理程序拥有相关属性作为其状态的一部分。然后它会以与上述情况相同的方式将它们作为普通道具传递给每个孩子。

例如,您的路线图可能如下所示:

<Route name="app" path="/" handler={App}>
    <Route name="realestates" handler={RealEstatesPage}/>
    <Route name="realestatesPrefiltered" handler={RealEstatePrefiltered}>
       <Route name="homes" handler={RealEstateHouseDetails}/>
       <Route name="apartments" handler={RealEstateHouseDetails}/>
       <Route name="land" handler={RealEstateLandDetails}/>
    </Route>
    <Route name="realestate" handler={RealEstateDetails}/>
    <DefaultRoute handler={MainPage}/>
</Route>

那么您的 RealEstatePrefiltered 组件可能如下所示:

RealEstatePrefiltered = React.createClass({
    getInitialState: function () {
        return { search: '', type: '' }; // Update from store or event.
    },
    render: function() {
        return <div>
            <RouteHandler search={this.state.search} type={this.state.type} />
        </div>;
    }
});

剩下的唯一问题是,如何更改该组件的状态?您可以为此使用 Flux 存储,或者您可以仅设置一个全局事件并让该组件监视更改。

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

React.js 通过 Router 传递参数,而不是在 URL 中 的相关文章

  • 如果Functions是javascript中的对象,为什么function.constructor指向Function而不是Object?

    当像这样从窗口对象创建以下函数时 function userInfo 既然函数是对象 为什么 userInfo constructor 显示 Function 而不是 Object 当使用以下内容时 它甚至显示函数而不是对象 Functio
  • Node.js Google-云存储上传目的地规范

    我有一个 Node js 服务器并且正在使用谷歌云上传一些图像文件的包Firebase 存储 上传本身工作正常 但 google cloud API 似乎只能将文件上传到 Firebase Storage 根文件夹 有没有办法指定远程位置来
  • 使用 Charts.js 禁用动画

    我在使用 Charts js 关闭动画时遇到一些问题 这是我的代码 var pieData value 30 color F38630 value 50 color E0E4CC value 100 color 69D2E7 var myP
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 如何获得相对于特定父级的偏移量?

    我想获取元素相对于的偏移量特定的父母不是直接的 也不是文档 我在互联网上查找并找到了offset http api jquery com offset and position http api jquery com position jQ
  • 将其作为参数传递给 addEventListener()

    我想添加change一组复选框的事件 我如何访问this在我的事件函数中 这样当我执行事件时我可以访问复选框的值 这是我当前的代码 var checkboxes document getElementsByClassName cb Arra
  • 对函数而非组件做出延迟加载反应

    我正在开发一个 React v16 应用程序 需要加载一个重型 IMO 库来导出 xlsx 数据 我正在使用功能组件 挂钩 我了解并使用过
  • Javascript“命名空间”和 jQuery AJAX

    我正在使用此处列出的建议 http www odetocode com articles 473 aspx http www odetocode com articles 473 aspx 使用模拟的JavaScript AJAX网络聊天系
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 使用 jQuery 更改 SVG 元素的“xlink:href”属性

    我正在尝试使用单击事件更改 xlink href 属性 到目前为止它部分有效 这就是我正在做的 HTML a href class ui btn ui corner all ui shadow editIcon style text ali
  • 如何从Web JavaScript应用程序获取桌面C#程序中的变量

    我遇到一个问题 有两个应用程序 一种是 C 中的桌面应用程序 另一种是 javascript 中的 Web 应用程序 运行桌面应用程序中的一些变量或信息需要传输到Web应用程序 有谁知道如何解决这个问题 有人愿意提供更多细节来解决这个问题吗
  • 谷歌浏览器如何启动桌面应用程序?

    我真的不知道术语 所以我将从一个例子开始 如果我点击磁力链接 Google Chrome 会询问我是否要启动 torrent 客户端 我单击 确定 chrome 启动该应用程序 该应用程序根据链接执行一些操作 现在有办法查看应用程序如何从
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a
  • 正则表达式获取两个方括号之间的数字

    您好 我需要使用正则表达式在 JavaScript 中获取两对方括号内的字符串 这是我的字符串 12 23 asd 到目前为止我尝试的是使用这种模式 d 我需要获得价值12使用正则表达式 您可以使用以下正则表达式 d 这将提取12 from
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 在 Map() 的条目上使用 Promise.all

    我正在使用 Map 来表示一些键 值对 let myMap new Map myMap set foo bar myMap set foo2 bar42 对于每个 Map 条目 我执行一个返回 Promise 的函数 所有这些 Promis
  • gatsbyjs、reactjs - 为什么组件渲染两次而图像没有出现?

    我是新来的gatsbyjs并使用 v2 我有 3 个组件 加载器 标题和布局 layout js import React from react import Helmet from react helmet import StaticQu
  • 保留对 React 状态变量的“引用”

    据我所知 Javascript 中没有指针 我有以下问题 但我想知道是否有一个解决方案让我无法解决 解决方案可能是普通的 Javascript 或者像 Context API 这样的 React js 钩子 useContext 或者更多
  • Chrome 中的 addEventListener

    我正在关注 Lynda com 上有关新 DOM 事件模型的教程 这是我正在使用的代码 function addEventHandler oNode sEvt fFunc bCapture if typeof window event un

随机推荐

  • lme4 和 languageR 兼容性错误:“输入模型不是 mer 对象”

    我有一个数据集 dat2 我想在其上拟合线性混合效应模型 我过去使用 lmer 包 lme4 作为 pvals fnc 的补充来计算相关的 p 值 但是 由于我使用新的 lme4 1 0 4 和 languageR 1 4 包重新安装了 R
  • 在查询字符串中发布嵌套对象 - Node.js

    我的代码尝试将数据从本地 Node js 服务器发布到 Coldfusion API 我已成功与 API 进行通信并通过请求标头对自己进行身份验证 然而 我在实际传递 JSON 对象时遇到了困难 因为我无法获得正确的结构 API 不接受请求
  • 雷斯克 vs Sidekiq? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我目前正在使用Resque对于我的后台进程 但最近我听到了很多关于sidekiq 有人可以比较 区分吗 我特别想知道是否有一种方法可以
  • 使用 Javascript 获取支持 bean 值

    JSF 2 0 莫贾拉 2 0 1 PrimeFaces 3 4 1 有类似的问题 但我需要某物 别的 javascript函数必须等待backing bean方法 该方法正在填充想要从js函数中提取的变量 我想说的是
  • C++ 向量累加

    我试图对向量使用累积函数 vector
  • 在有序数组中添加额外的数字

    在已经上升的有序数组中插入新数字的最佳方法是什么 new number 6 old array array 1 3 4 5 7 8 10 new array must be 1 3 4 5 6 7 8 10 为什么不直接添加它并再次排序呢
  • OpenCV 2.4.1 - 在 Python 中计算 SURF 描述符

    我正在尝试更新我的代码以使用cv2 SURF 相对于cv2 FeatureDetector create SURF and cv2 DescriptorExtractor create SURF 但是 在检测到关键点后 我无法获取描述符 正
  • Android SU 权限:如何使用它们?

    这里有一种情况 我正在使用 Java 开发一个 Android 应用程序 我对这些东西都很熟悉 但现在这是我第一次需要使用 SU 权限 我只需要替换 实际上是重命名 system app 目录中的文件 但看起来我无法以通常的方式执行它 Fi
  • 启动python解释器时显示的消息的含义

    我知道这肯定是基本信息或知识 但我想知道 并且找不到答案 执行后立即显示什么信息或含义是什么python命令并启动解释器 例如 在这种情况下这意味着什么 Win32 上的 Python 3 8 7 tags v3 8 7 6503f05 2
  • Curl 返回 http 状态代码以及响应

    我使用curl 获取http 标头来查找http 状态代码并返回响应 我使用命令获取 http 标头 curl I http localhost 为了获得响应 我使用命令 curl http localhost 一旦使用 I 标志 我就只得
  • JUnit - 初始化程序错误中的异常

    我正在尝试使用静态方法测试一个类 但在这一行中出现错误 FormReferenceDataPopulator target new FormReferenceDataPopulator 这是失败的痕迹 java lang Exception
  • 防止导航到同一片段

    我正在使用带有 BottomNavigationView 的 Android 导航 jetpack 库 我已经实现了 NavHost NavGraph 和我的片段 当我使用操作进行导航时 一切都按预期进行 我使用以下代码来设置一切 val
  • 如何在 Angular 4 中创建分页组件? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我有一个 API 端点 例如 list students page 5 rows 10带分页参数page and size 我想创建一个 a
  • 匹配平衡括号的正则表达式

    我需要一个正则表达式来选择两个外括号之间的所有文本 Example START TEXT text here possible text text possible text more text END TXT Result text he
  • 如何构建一个在用作 constexpr(如断言)时行为不同的自定义宏?

    从 C 14 开始 断言宏可以在函数中使用 即使它们被定义为 constexpr 我知道这与它的计算结果为 true 有关 但我无法弄清楚实际的代码是什么样子 具体来说 如何构建一个宏 该宏在运行时评估的 constexpr 函数中运行时打
  • PL/SQL 逗号分隔列表;删除重复项并放入数组中

    我有一个以逗号分隔的列表作为 PL SQL 过程中的字符串 我需要 删除重复项 将列表放入数组中 我发现了多种方法可以做到其中之一 但不能同时做到两者 有什么帮助吗 有一个众所周知的 SQL 技巧可以将逗号分隔的列表转换为行 只需使用这个技
  • 限制 .map 循环中的项目

    我想问一下如何限制我的 map例如 仅循环到 5 个项目 因为当前当我访问 api 时 它返回 20 个项目 但我只想显示 5 个 我发现大多数情况只是循环整个对象数组 而不是将其限制为多个项目 注意 我无法控制 API 因为我只是使用 m
  • libtool:i686-pc-mingw32 共享中不允许未定义的符号

    我正在使用自动工具作为我的库的构建系统 最近库被移植到Windows 尽管我遇到了一个奇怪的错误 但库编译和链接成功 配置和make后只有静态库 除了警告之外 一切看起来都很好libtool libtool undefined symbol
  • 在 C# 中,有没有办法在运行时确定类的成员?

    假设我有一个名为 foo 的类 它有 3 个公共成员 foo1 foo2 和 foo3 现在假设我正在编写一个函数 它将 foo 类的实例作为参数 但是当我编写这个函数时 我不知道它有哪些公共成员 有没有办法让我在运行时确定它具有公共成员
  • React.js 通过 Router 传递参数,而不是在 URL 中

    您好 我想从一个页面移动到另一页面并传递参数search and type 如果 URL 中没有这些参数 我可以使用 React Router 来实现此目的吗 我正在看这个https github com rackt react route