当前位置: 首页 > 知识库问答 >
问题:

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

曾昂然
2023-03-14
 <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)

共有1个答案

苏华藏
2023-03-14

从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);
 类似资料:
  • 有没有一种干净的方法可以将当前可选查询参数与模板中链接上的附加可选查询参数合并? 当前URL:< code >/search;brand=Trek 所需的转到链接:(startCount 将递增) 我知道Angular支持合并普通查询参数的功能(https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html)

  • 我有寻呼路线/电影吗?categoryId=21213在这个页面上,我有一部分演员,点击它应该重定向到/movies?categoryId=21213/演员?actorId=23434234 我应该如何正确地描述用一个actor来渲染我最新的组件?我试过了 但这不起作用

  • 所以我有一些路线,比如<code>/category/tech</code>和<code</categority/tech/new<code>和<code>/category/tech/old</code>等等 他们都使用 或者我必须分别定义它们,就像

  • 假设我有以下两条路线: 现在,当我尝试点击路由的根路由为与参数被触发... 我假设解决方案是在param1前面设置一个问号,就像这样,这样它就可以从路由中保持住,但我不知道如何在react router v4中做到这一点

  • 英文原文:http://emberjs.com/guides/routing/query-params/ 通常情况下,URL的动态段是模型的一种序列化表示,最常见的是模型的ID。然后,有时候还需要将应用的其他状态也序列化到URL中。这可能是对从服务器端加载模型有影响的一些参数,比如要查看的是那一页结果;也可能是一些关于客户端状态的信息,比如在客户端实现排序时的记录排序规则。 当然URL中还可以被序

  • 使用redux和反应路由器,我想访问路由指定的组件以外的组件上的路由参数。 我已经对react-router、redux和react-router-redux进行了如下设置,我想从我的redux存储访问reportId参数。 我已经尝试连接react-redux路由器来存储路由状态,但是我发现除了活动路由的完整路径之外,redux内部没有任何有用的存储。这让我可以选择从redux中的路径解析出re