如何使用 React 路由器设置带有可选查询参数的路由?
How to set route with optional query parameter using React router?
我有一个路径
<Route path="/account/:accountid/LoginPage"
component={LoginPage}/>
如果 url 是 -> /account/12332/LoginPage
,这会很好地工作。我想要可选的查询参数。 Url 结构将是
/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 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 问题中,但有点分散在评论中。像(虽然没有测试):
路线:
<Route exact path='/test' component={HomePageConnector} />
正在获取组件中的参数:
const parseQueryString = require('query-string');
let queryString = this.props.location.search;
let queryParams = parseQueryString.parse(queryString);
我有一个路径
<Route path="/account/:accountid/LoginPage"
component={LoginPage}/>
如果 url 是 -> /account/12332/LoginPage
,这会很好地工作。我想要可选的查询参数。 Url 结构将是
/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 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 问题中,但有点分散在评论中。像(虽然没有测试):
路线:
<Route exact path='/test' component={HomePageConnector} />
正在获取组件中的参数:
const parseQueryString = require('query-string');
let queryString = this.props.location.search;
let queryParams = parseQueryString.parse(queryString);