如何使用 React 路由器设置带有可选查询参数的路由? [英] How to set route with optional query parameter using React router?

问题描述

我有一个路径

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

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

This works fine if the url is -> /account/12332/LoginPage. I want to have optional query parameters. Url structure would be something as

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

我已将路径修改为

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

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

after this if I try to access the url it does not redirect me to the appropriate page instead it throws an error as

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 v4(最新版本)开始，不支持查询参数(?user=nerve&name=no-one).不过它确实支持 URL 参数.有一个 GitHub 问题 讨论了同一点.继续阅读它，有一些很好的解决方案，但没有直接融入核心库.

As of react-router v4 (latest version), it does not support query params (? user=nerve&name=no-one). It does support URL params though. There is a GitHub issue discussing the same point. Go ahead and read it, there are some good solutions but nothing baked right into the core library.

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

A workaround that I usually implement is adding multiple routes that render the same component.

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

编辑

据我所知，v4 的唯一问题是它不再公开 location.query 对象.但是，您仍然可以访问 location.search(它是一个字符串，而不是一个对象).您可以读取此字符串并将其传递给像 query-string 这样的库以获得更有意义的对象从它.这样，您可以继续使用查询参数而不是 URL 参数.此信息已写在 GitHub 问题中，但在评论中有点分散.像(虽然没有测试):

Edit

The only issue with v4, as I understand, is that it NO LONGER exposes the location.query object. However, you still have access to location.search (which is a STRING, not an object). You can read this string and pass it to a library like query-string to get a more meaningful object out of it. This way, you can continue to use query parameters rather than URL params. This information is already written in the GitHub issue but is a little scattered across comments. Something like (though not tested):

路线:

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

获取组件中的参数:

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

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

这篇关于如何使用 React 路由器设置带有可选查询参数的路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！