我在我的项目中使用 react-router-dom 4.0.0-beta.6 。我有如下代码：
<Route exact path="/home" component={HomePage}/>
我想在HomePage组件中获取查询参数。我找到了location.search参数，它看起来像这样：?key=value，所以它是未解析的。
使用 react-router v4 获取查询参数的正确方法是什么？
问问题
121822 次
13 回答
203
解析查询字符串的能力已从 V4 中移除，因为多年来一直存在支持不同实现的请求。有了这个，团队决定最好让用户来决定实现的样子。我们建议导入查询字符串库。这是我使用的一个
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
您可以在此处阅读有关该决定的更多信息
于 2017-04-05T02:06:09.530 回答
24
另一种有用的方法可能是像这样使用开箱即用的方法URLSearchParams；
let { search } = useLocation();
const query = new URLSearchParams(search);
const paramField = query.get('field');
const paramValue = query.get('value');
干净，可读，不需要模块。更多信息如下；
于 2020-05-12T20:10:36.300 回答
8
根据他们的文档https://reactrouter.com/web/example/query-parameters你需要：
import { useLocation } from 'react-router-dom';
// A custom hook that builds on useLocation to parse
// the query string for you.
function useQuery() {
return new URLSearchParams(useLocation().search);
}
function App() {
const query = useQuery();
console.log(query.get('queryYouAreLookingFor'));
}
于 2021-06-03T08:55:09.777 回答
6
接受的答案效果很好，但如果您不想安装额外的软件包，您可以使用这个：
getUrlParameter = (name) => {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
let results = regex.exec(window.location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
给定http://www.google.co.in/?key=value
getUrlParameter('key');
将返回value
于 2017-11-02T11:25:33.780 回答
5
我正在研究反应路由器 v4 的参数，他们没有将它用于 v4，不像反应路由器 v2/3。我会留下另一个功能 - 也许有人会发现它有帮助。您只需要 es6 或纯 javascript。
function parseQueryParams(query) {
//You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
const queryArray = query.split('?')[1].split('&');
let queryParams = {};
for (let i = 0; i < queryArray.length; i++) {
const [key, val] = queryArray[i].split('=');
queryParams[key] = val ? val : true;
}
/* queryParams =
{
key:"asdfghjkl1234567890",
val:"123",
val2:true,
val3:"other"
}
*/
return queryParams;
}
另外，这个功能可以改进
于 2017-11-22T21:52:46.153 回答
2
诶？
queryfie(string){
return string
.slice(1)
.split('&')
.map(q => q.split('='))
.reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}
queryfie(this.props.location.search);
于 2019-04-11T15:01:59.220 回答
0
我刚刚做了这个，所以如果您更新以从较低版本响应路由器 v4 或更高版本，则不需要更改整个代码结构（在其中使用来自 redux 路由器存储的查询）。
于 2018-03-23T09:27:13.180 回答
0
这是一种无需导入任何其他库的方法
const queryString = (string) => {
return string.slice(1).split('&')
.map((queryParam) => {
let data = queryParam.split('=')
return { key: data[0], value: data[1] }
})
.reduce((query, data) => {
query[data.key] = data.value
return query
}, {});
}
const paramData = (history && history.location && history.location.search)
? parseQueryString(history.location.search)
: null;
于 2021-02-19T10:15:31.247 回答
0
反应路由器 v6
来源：在 React Router 中获取查询字符串（搜索参数）
我知道这是 v4 的问题，但是随着v6的发布，我们可以在新版本的 React Router 中搜索参数。
使用新的useSearchParams钩子和.get()方法：
const Users = () => {
const [searchParams] = useSearchParams();
console.log(searchParams.get('sort')); // 'name'
return <div>Users</div>;
};
使用这种方法，您可以读取一个或几个参数。
阅读更多和现场演示：在 React Router 中获取查询字符串（搜索参数）
于 2021-11-26T14:52:13.650 回答
0
如果您的路线定义是这样的：
<Route exact path="/edit/:id" ...../>
import { useParams } from "react-router";
const { id } = useParams();
console.log(id)
于 2022-01-12T22:35:16.250 回答
-3
好简单
只需使用钩子useParams()
例子：
路由器：
<Route path="/user/:id" component={UserComponent} />
在您的组件中：
export default function UserComponent() {
const { id } = useParams();
return (
<>{id}</>
);
}
于 2020-09-22T17:08:01.883 回答
-4
无需任何包：
const params = JSON.parse(JSON.stringify(this.props.match.params));
然后您可以使用params.id
于 2019-01-19T23:12:50.057 回答