我在我的项目中使用 react-router-dom 4.0.0-beta.6。 我有如下代码：
<Route exact path="/home" component={HomePage}/>
我想在HomePage 组件中获取查询参数。
我找到了location.search 参数，看起来像这样：?key=value，所以它是未解析的。
使用 react-router v4 获取查询参数的正确方法是什么？
【问题讨论】：
标签： react-router react-router-v4 react-router-dom
解析查询字符串的功能已从 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的更多信息
【讨论】：
接受的答案效果很好，但如果你不想安装额外的包，你可以使用这个：
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
【讨论】：
我正在研究反应路由器 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;
}
另外，这个功能还可以改进
【讨论】：
我刚刚做了这个，所以如果你更新到从较低版本响应路由器 v4 或更高版本，则不需要更改整个代码结构（在其中使用来自 redux 路由器存储的查询）。
【讨论】：
给出的答案是可靠的。
如果您想使用qs 模块而不是query-string（它们的受欢迎程度大致相同），语法如下：
const query = qs.parse(props.location.search, {
ignoreQueryPrefix: true
})
ignoreQueryPrefix 选项是忽略前导问号。
【讨论】：
不需要任何包：
const params = JSON.parse(JSON.stringify(this.props.match.params));
然后就可以用params.id获取相关参数了
【讨论】：
this.props.match.params 包含路径参数，这个问题是关于查询参数的。
嗯？
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);
【讨论】：
另一种有用的方法是像这样使用开箱即用的URLSearchParams；
let { search } = useLocation();
const query = new URLSearchParams(search);
const paramField = query.get('field');
const paramValue = query.get('value');
干净、可读且不需要模块。更多信息如下；
【讨论】：
只需使用钩子useParams()
路由器：
<Route path="/user/:id" component={UserComponent} />
在您的组件中t：
export default function UserComponent() {
const { id } = useParams();
return (
<>{id}</>
);
}
【讨论】：
这是一种无需导入任何额外库的方法
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;
【讨论】：
根据他们的文档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'));
}
【讨论】：
React 路由器 v6
来源：Getting Query Strings (Search Params) in React Router
我知道这是 v4 的问题，但是随着 v6 的发布，我们可以在新版本的 React Router 中搜索参数。
使用新的useSearchParams 钩子和.get() 方法：
const Users = () => {
const [searchParams] = useSearchParams();
console.log(searchParams.get('sort')); // 'name'
return <div>Users</div>;
};
使用这种方法，您可以读取一个或几个参数。
阅读更多内容和现场演示：Getting Query Strings (Search Params) in React Router
【讨论】：