react-router - 如何在react-router v4中获取查询参数

标签 react-router react-router-v4 react-router-dom

我在我的项目中使用react-router-dom 4.0.0-beta.6。 我有如下代码:

<Route exact path="/home" component={HomePage}/>

我想在 HomePage 组件中获取查询参数。 我找到了 location.search 参数,它看起来像这样:?key=value,所以它是未解析的。

使用react-router v4获取查询参数的正确方法是什么?

最佳答案

V4 中取消了解析查询字符串的功能,因为多年来一直要求支持不同的实现。因此,团队决定最好由用户来决定该实现的样子。我们建议导入查询字符串库。 Here's one that I use

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

如果您想要原生的东西并且它可以满足您的需求,您也可以使用new URLSearchParams

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

您可以阅读有关该决定的更多信息 here

关于react-router - 如何在react-router v4中获取查询参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43216569/

相关文章:

javascript - 尝试在我的 react 应用程序中使用链接但遇到问题

javascript - 在 react-router v4 中使用 React IndexRoute

reactjs - react 模拟测试 useNavigate

css - React Router Dom v6 - 事件导航上的悬停样式

javascript - React 组件使用 useState 渲染两次

reactjs - 当路由参数更改时,组件不会重新加载新数据

javascript - 在 React.js 中,如何使用 React-bootstrap 创建链接来更改事件选项卡?

javascript - React-Router错误 "Cannot read property '位置'未定义”

javascript - 如何使用 react-router-dom 将 NavLink 设置为事件状态

reactjs - React Router v4 路由不起作用