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

Question

 <Route path="/account/:accountid/LoginPage"
      component={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)

Answer 1

从react-router v4（最新版本）开始，它不支持查询参数（？user=neure&name=no-one)。不过，它确实支持URL参数。有一个GitHub问题讨论了同样的问题。去读吧，有一些很好的解决方案，但没有什么是直接进入核心库的。

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

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

据我所知，v4的唯一问题是不再公开location.query对象。但是，您仍然可以访问locathtml" target="_blank">ion.search（它是字符串，而不是对象）。您可以读取这个字符串并将其传递给像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);