在反应js中添加动态参数的语法[重复]答案

【问题标题】：Syntax to add dynamic parameter in react js [duplicate]在反应js中添加动态参数的语法[重复]
【发布时间】：2020-11-17 13:51:14
【问题描述】：

我在 react js 中需要语法帮助，

我希望在路径中实现这样的目标

http://localhost:3000/verify-email?key=ffdffae0237c43e6572bca3a3867eda1&eid=c2Frc2hpN0BnbWFpbC5jb20=

以下代码不起作用

<Route name="businessInformation" exact path="/verify-email?key=:someRandomKey&eid=:someRandomKey"> //Need help here

虽然，这适用于http://localhost:3000/verify-email/:key/:eid

 <Route name="businessInformation" exact path="/verify-email/key/eid">

我应该如何附加这样的字符串值以便它理解？

【问题讨论】：

因为如果你想将参数传递给路径，只需写/:paramName。在您的代码中，您还可以编写它的值。请在此处查看其文档：reactrouter.com/web/api/Route/path-string-string
我想实现这样的目标，而不是 /verify-email?key=:someRandomKey&eid=:someRandomEmailKey 我该怎么做？其中动态值为 someRandomKey 和 someRandomEmailKey

标签： reactjs react-router

【解决方案1】：

好的，问题非常不清楚，为简洁起见，我们假设您要读取一个查询字符串。这条路线看起来很简单：

<Route
    name="businessInformation"
    exact path="/verify-email"
    render={props => <Example {...props}>}
/>

需要读取查询字符串的组件如下所示：

const Example = () => {
    const { key, eid } =  new URLSearchParams(window.location.search)
    
    return (
        <span>{`key is ${key} and id is ${eid}`}</span>
    )
}

如果你想导航到这样的路线，那就是：

<Link to={`/verify-email?key${key}&eid=${id}`}/>

【讨论】：

你在中写的我希望在中有类似的代码有没有办法直接做到这一点而不使用
为什么，它没有用例？路径为“/verify-email”的路由已经能够读取所有查询参数。
谢谢。在 props.location.search 中找到值。通过在我的代码中实际编写您的答案来理解您的答案和概念！
很高兴我能帮上忙
嘿！在 {key is ${key} and id is ${eid}} 上设置 const { key, eid } = new URLSearchParams(window.location.search) 时身份不明，但在控制台中，获取 window.location.search 正确的查询值

【解决方案2】：

这是查询字符串

"?var1=val&var2=val2"

而且，这是 URL 参数

/api/:param1/编辑

要实现具有动态值的查询字符串，我建议使用模板literats

const someRandomKey = "<random_key>"; // Either hard-code any value or read from a state / props. 
const someRandomId = "<random_id>";
<Route name="businessInformation" exact path=`/verify-email?key=${someRandomKey}&eid=${someRandomKey}`>

【讨论】：

这些值不能硬编码或来自某个状态。在 app.js 中，我希望点击 url：localhost:3000/… 其中 key 和 eid 是动态值。此链接将来自用户的电子邮件以进行验证。我应该如何在 app.js 中路由这个？