如何使用 React 路由器设置带有可选查询参数的路由？

Posted 2023-02-21

【中文标题】如何使用 React 路由器设置带有可选查询参数的路由？

【英文标题】：How to set route with optional query parameter using React router?

【发布时间】：2017-12-15 01:34:34

【问题描述】：

我有一条路径

 <Route path="/account/:accountid/LoginPage"
      component=LoginPage/>

如果 url 是 -> /account/12332/LoginPage，这可以正常工作。我想要可选的查询参数。网址结构将是

/account/12322/LoginPage?User=A&User=B

我已将路径修改为

<Route path="/account/:accountid/LoginPage(/:User)"
      component=LoginPage/>

在此之后，如果我尝试访问该 url，它不会将我重定向到适当的页面，而是会引发错误

useBasename.js:56 Uncaught TypeError: history.getCurrentLocation is not a function
    at Object.getCurrentLocation (useBasename.js:56)
    at Object.getCurrentLocation (useQueries.js:64)
    at Object.listen (createTransitionManager.js:246)
    at Object.componentWillMount (Router.js:97)
    at ReactCompositeComponent.js:347
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:346)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)

【问题讨论】：

React Router with optional path parameter的可能重复

我试过了，但没有解决我的问题

【参考方案1】：

从 react-router v4（最新版本）开始，它不支持查询参数（？user=nerve&name=no-one）。它确实支持 URL 参数。有一个GitHub issue 讨论同一点。继续阅读吧，有一些很好的解决方案，但核心库中没有任何内容。

我通常实施的一种解决方法是添加多个渲染相同组件的路由。

<Route exact path='/' component= HomePageConnector  />
<Route exact path='/search/:searchTerm' component= HomePageConnector  />

编辑

据我所知，v4 的唯一问题是它不再公开location.query 对象。但是，您仍然可以访问location.search（它是一个字符串，而不是一个对象）。您可以读取此字符串并将其传递给 query-string 之类的库，以从中获取更有意义的对象。这样，您可以继续使用查询参数而不是 URL 参数。此信息已写入 GitHub 问题，但在 cmets 中有些分散。类似的东西（虽然未经测试）：

路线：

<Route exact path='/test' component=HomePageConnector />

获取组件中的参数：

const parseQueryString = require('query-string');

let queryString = this.props.location.search;
let queryParams = parseQueryString.parse(queryString);

【讨论】：

这似乎对单条路线有好处......如果我在多条路线上遇到类似的情况怎么办？

我是 reactjs 新手......现在我不知道如何使用你的答案......请帮助我