从反应路由器哈希片段获取查询参数更新：

javascript reactjs react-router client-side client-side-scripting

2022-08-30 04:31:23

我在客户端为我的应用程序使用react和react-router。我似乎无法弄清楚如何从URL中获取以下查询参数，例如：

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>
);

我的路线工作正常，但我不确定如何格式化路径以获取我想要的参数。感谢任何帮助！

答案 1

注意：从评论中复制/粘贴。一定要喜欢原来的帖子！

用 es6 编写并使用 react 0.14.6 / react-router 2.0.0-rc5。我使用此命令在我的组件中查找查询参数：

this.props.location.query

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

更新：

对于 React-Router v4，请参阅此答案。基本上，用于获取查询字符串并使用包或 URLSearchParams 进行解析：this.props.location.searchquery-string

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

答案 2

上述答案在中不起作用。以下是我为解决问题所做的工作 -react-router v4

第一安装分析所需的查询字符串。

npm install -save query-string

现在，在路由组件中，您可以访问未解析的查询字符串，如下所示

this.props.location.search

您可以通过登录控制台进行交叉检查。

最后解析以访问查询参数

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own

所以如果查询是这样的?hello=world

console.log(parsed.hello)将记录world