当前位置: 首页 > 面试题库 >

从react-router哈希片段获取查询参数

张承颜
2023-03-14
问题内容

我在客户端上为我的应用程序使用react和react-router。我似乎无法弄清楚如何从如下网址获取以下查询参数:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

我的路线如下所示(我知道该路线完全错误):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

我的路线工作正常,但我不确定如何格式化路径以获取所需的参数。感谢任何帮助!


问题答案:

注意:复制/粘贴评论。确保喜欢原始帖子!

编写es6并使用react 0.14.6 / react-router 2.0.0-rc5。我使用以下命令在组件中查询查询参数:

this.props.location.query

它在URL中创建所有可用查询参数的哈希。

对于React-Routerv4,请参见此答案。基本上,用于this.props.location.search获取查询字符串并使用query-string包或URLSearchParams进行解析:

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');


 类似资料:
  • 我在我的项目中使用react-router-dom 4.0.0-beta.6。我有一个代码如下: 我想在组件中获取查询参数。我找到了参数,如下所示:,因此未解析。 什么是正确的方法来获得查询参数与反应路由器v4?

  • 问题内容: 如何从php中的URL获取片段(哈希值“#”后的值)? 从我想说 问题答案: 如果要在用户浏览器中显示的哈希标记或锚点之后获取值:使用“标准” HTTP则无法实现,因为此值永远不会发送到服务器(因此该值在或类似版本中将不可用预定义变量)。您可能需要在客户端使用某种JavaScript魔术,例如,将该值包含为POST参数。

  • 问题内容: 在我的React应用程序中,我有一些用户进入应用程序的参数,这些参数提供有关它们来自何处的一些信息。有没有一种方法可以使用react- router在整个应用程序中保留这些查询参数。意思是每次更改路线时,Id都会像那些查询参数一样保留在url中。我看到的唯一示例是在路由之间传递查询参数,但没有为每个路由都保留它们。 问题答案: React-Router v3的解决方案: 我在Types

  • 问题内容: 我正在使用react- router进行路由,并使用hashHistory选项,以便可以从浏览器刷新页面或指定现有路由之一的url并到达正确的页面。它工作正常,但我在URL中看到的哈希是这样的: http:// localhost /#/ login?_k = ya6z6i 这是我的路由配置: 问题答案: 您是否尝试过browserHistory选项?您还可以从浏览器刷新页面,或指定现

  • 问题内容: 从服务器重定向后,如何在我的routes.jsx文件中定义路由以从Twitter的单点登录过程生成的URL 捕获参数值? 我尝试使用以下路由配置,但没有捕获上述参数: 问题答案: 反应路由器v3 React Router已经为您解析了位置并将其作为道具传递给RouteComponent。您可以通过访问查询(在URL中的?之后)部分 如果要查找路径参数值(在路由器内部用冒号(:)分隔),