将url参数传递给react-router的Link组件的正确方法是什么？
将url参数传递给react-router的Link组件的正确方法是使用to属性中的pathname和search属性。
React Router的Link组件是用于在应用程序中导航到不同URL的组件。可以通过to属性指定要导航到的目标URL。要将URL参数传递给Link组件，可以在to属性中使用pathname和search属性。
pathname属性指定导航到的目标URL路径，可以是字符串或对象。如果是对象，可以在其中指定URL路径和参数。例如：
import { Link } from 'react-router-dom';
<Link to={{ pathname: '/path', search: '?param1=value1¶m2=value2' }}>Link</Link>search属性指定URL的查询字符串部分，其中包含参数和对应的值。可以通过使用query-string库来动态构建查询字符串。
对于上述示例中的参数param1和param2，可以使用以下方法构建查询字符串：
npm install query-stringimport { Link } from 'react-router-dom';
import queryString from 'query-string';
const params = { param1: 'value1', param2: 'value2' };
const search = queryString.stringify(params);
<Link to={{ pathname: '/path', search }}>Link</Link>这样可以在点击Link组件时将参数传递给React Router，并在目标URL的查询字符串中使用。
如果需要在目标组件中获取传递的参数，可以使用React Router的useLocation钩子或withRouter高阶组件。详细信息可以参考React Router的文档。
腾讯云相关产品和产品介绍链接地址:
相关·内容
到目前为止，我一直在使用链接组件时手动替换url参数的名称，例如： const userIdParam = ':userId'
userDetails: `/users/${ userIdParam }` pathname: routes.userDetails.replace(userIdParam, user.id)}}/> react路由器是否支持将</
浏览 19提问于2020-07-21得票数 0
我刚刚拿起了react-router，我确信我做错了什么，只是不能从文档和示例中找出是什么。 <Router> <ul>
<li><Link to="/">Home</Link></li>
浏览 0提问于2017-11-02得票数 0
我有一个不属于任何其他组件的组件。当用户点击一个链接时，页面将跳转到该链接，这是通过react-router实现的。<Link to={`/weather-stations/${this.props.active_device}`} >view detail我找不到一种方法来将应用程序的状态传递给该组件
浏览 1提问于2015-12-18得票数 1
1回答
我在访问使用react-router的render方法呈现的有状态组件中的url参数时遇到问题。我已经读到，如果我想通过react-router将道具传递到一个组件中，最好的方法是使用render函数。下面是我的带有Link和Route的App组件 import React from
浏览 9提问于2019-07-04得票数 0
我在表中使用<Link/>，它将动态参数id从路径名/competitions/${comp.id}传递到React-Router <Route path='/competitions/:id' component参数id用于在Teams组件内执行Ajax请求，该组件提供http://localhost:3000/competitions/426形式的<
浏览 0提问于2017-02-08得票数 1
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。/Button.css';: SIZES
浏览 2提问于2021-03-11得票数 0
我正在尝试组合react-router v4、react和redux。因为react-router会跟踪URL，所以我选择在redux-model中保留这段状态。但是当react-router发生路由更改时，我仍然需要一种方法来分派redux操作。哪里是做这件事的最佳地点？我的第一个尝试是将它放在react-router的Link的onClick属性中：
/&#
浏览 14提问于2018-02-06得票数 2
回答已采纳
我使用的是通过/customers/${id}传递变量的react-router Link组件。该链接导航到正确的组件，但不是将${id}转换为它的值，而是将其作为文本传递，如下所示：'/customers/$%7Bid%7D‘。我希望能够单击列表中的项目并导航到将惟一ID作为参数传递的detai
浏览 34提问于2019-01-01得票数 1
回答已采纳
每当我单击学生按钮时，它应该调用我调用的其他组件内部的函数，但我得到了错误。我应该怎么做才能通过onlick调用其他组件。
浏览 9提问于2017-01-25得票数 1
回答已采纳
1回答
到目前为止，我对属性是如何通过参数从一个组件传递到另一个组件的知识范围如下假设在topic中存在一个名为A.jsx的状态变量。我想把它传递给B.jsx，所以我执行以下操作}当被召唤时，将呈现“今天的主题是天气！”//结束:我的知识范围
现
浏览 2提问于2015-10-02得票数 30
回答已采纳
如何使用react路由器dom根据选定的下拉值和react中的按钮点击来重定向组件？ 我已尝试使用重定向标记，但无法重定向到其他组件
浏览 9提问于2019-04-10得票数 1
1回答
使用："react-router-dom"："^5.1.2“ 我正在导航到一个url： http://localhost:3000/#id_token=123&expires_in=3600&token_type=Bearer 我准备了一个重定向组件来捕捉它，并将我重定向到仪表板： <Redirect exact from="/" to="/dashboard" /> 我知道我们可以重定向并将状态传<e
浏览 25提问于2020-12-31得票数 0
回答已采纳
我正在尝试构建一个React应用程序，并遇到了一些与React路由器有关的问题。首先，我的url总是有一些奇怪的杂凑在它的末尾。例如：
另外，我不确定url中的hashtag和下面的胡言乱语是否是同一个问题的一部分，或者它们是否与两个不同的问题有关。(我目前使用的是React路由器1.0)。其次，我认为奇怪的URL阻止我在表单上使用"action“属性，并且还想知道是否有
浏览 3提问于2016-01-21得票数 0
回答已采纳
1回答
为什么react-router是React组件并在内部使用react？我的意思是，路由问题在React组件出现之前就已经解决了？如果path属性与url路径不匹配，Route组件的render方法是否返回null？
使用react-router的Router和Route组件仅仅是一个很好的设计模式吗？
浏览 0提问于2016-12-18得票数 3
1回答
> </Route>我希望能够将特定的参数传递给特定的路由我知道我可以使用以下命令将所有参数传递给所有路由：
{this.props.
浏览 11提问于2016-07-22得票数 1
回答已采纳
在react-router中，为了访问URL参数，必须使用<Route>的component支柱//Then use the injected this.props.match.params.id to retrieve the id
要将道具传递给呈现的组件，必须使用ren
浏览 0提问于2018-09-28得票数 1
回答已采纳
在我的数据库中，我有多个练习，并在主页中显示所有这些练习。我希望能够单击“查看练习”按钮来查看有关该练习本身的信息。Exercise} exact/> </Switch> ); /> <&
浏览 22提问于2021-01-11得票数 1
回答已采纳
在webpack配置文件中启用historyApiFallback并重新启动服务器之后，当更改位置路径名时，浏览器会刷新，导致外部元素重新挂载(我的意思是，我可以看到它闪出白色并恢复到正常状态)，而这种情况只应该发生在嵌套在我的特殊情况下，有一个始终位于顶部的<Navbar />元素和一个具有{ this.props.children }的容器。我想知道是怎么回事？import React from 'react';
import ReactDOM from "react
浏览 0提问于2016-09-15得票数 0
回答已采纳
我有一个简单的react组件，它必须在用户要求时从服务器加载数据。问题是我不知道如何在组件加载状态之前传递动态变量speakerUrl并访问它。当然，我可以从this.props.params访问它，但是组件没有加载，当我进行graphql查询时也无法访问它。查询-当我手动设置url变量时，QuerySpeaker运行良好。路由器
<Route path="/speaker/:speakerUrl" component={SpeakerPage} /
浏览 5提问于2016-12-07得票数 6
回答已采纳
操作系统: Windows 10专业版React: 15.5.4这里的问题是什
浏览 0提问于2017-06-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
