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

Posted 2023-02-21

【中文标题】在反应js中添加动态参数的语法[重复]

【英文标题】：Syntax to add dynamic parameter in react js [duplicate]

【发布时间】：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

【参考方案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 中路由这个？