Javascript 在react应用程序中的所有用户导航期间保留查询参数

当用户访问我的网站时，他可能会带来一些查询参数，在访问期间他应该随身携带这些参数。我使用路由创建路径

例如：

<Switch>
  <Route exact path="/component1" component={Component1} />
  <Route exact path="/component2" component={Component2} />
</Switch>

组件1或2可能是另一个带有子路径的路由器，最终用户可以重定向到另一个项目，他必须随身携带参数

例如：

<Switch>
  <Route exact path="/component1" component={Component1} />
  <Route exact path="/component2" component={Component2} />
</Switch>

用户访问

mysite.com/welcome？source=google

，在这个项目中，他选择进入产品部分，路径为

mysite.com/product

，应该随身携带

source=google

，就像

mysite.com/product？source=google

。假设我有另一个react项目，重点是注册，他进入

signup.mysite.com/

，如果他使用项目中的按钮，他应该进入

signup.mysite.com/？source=google

---

我看到了一些建议在所有组件中实现

URLSearchParams

的解决方案，但可能有很多，而且会有很多重复的代码。

基于用户不需要知道参数的事实，我建议您执行以下操作：

在App.js中的useEffect中添加一个URLSearchParams（或者在声明路由的任何位置），这样您就可以从url中检索源值

如果参数存在，请将其保存在localStorage或中

需要时随时检索，不再需要时删除

---

注意：检索和删除信息很好，因为用户可以浏览您的网站，有时还可以与其他用户共享一个链接–这将使用来自原始用户的相同源值，并且可能与某些业务规则冲突

您是否需要让用户始终可见该信息，或者如果该信息是仅对您可用？查询参数仅对我很重要，用户不需要知道。只需添加一个anwser:）谢谢Rafael，但如果用户转到其他应用程序，如注册，则需要添加一个anwser:）。另一个应用程序我的意思是，像mono repo，我有一个登录页的react应用程序，另一个登录区域的react应用程序，在这个解决方案中，如果用户通过登录页应用程序到达并进入登录区域，我能访问登录页应用程序创建的本地存储或上下文吗？是的，localStorage可用于整个源（window.location.origin）。您可以尝试在一个键中设置一些值，并在“开发者工具”>“存储”>“本地存储”（在Google Chrome中）中查看它在浏览器中的存储方式。你可以在这里阅读更多内容：如果我的答案解决了你的问题，请记住选择我的答案，如果你还有更多问题，请告诉我