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

Question

我需要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-电子邮件/：key/：eid

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

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

Answer 1

这是查询字符串

“？var1=val

这是URL参数

/api参数

为了实现具有动态值的查询字符串，我建议使用模板读写器

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}`>

Answer 2

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

<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}`}/>