Question

我有一条路径

Automated Bot

如果网址是＆gt; <Route path="/account/:accountid/LoginPage" component={LoginPage}/>。我想要可选的查询参数。网址结构将是

/account/12332/LoginPage

我已将路径修改为

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

之后，如果我尝试访问该网址，则不会将我重定向到相应的网页，而是会抛出错误

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

Answer 1

从react-router v4（最新版本）开始，它不支持查询参数（？user = nerve＆amp; name = no-one）。它确实支持URL params。有GitHub issue讨论同一点。继续阅读它，有一些很好的解决方案，但没有任何东西直接进入核心库。

我通常实现的解决方法是添加多个呈现相同组件的路由。

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

修改

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

路线：

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

获取组件中的参数：

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

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

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

1 个答案:

修改