如何使用 react-router 执行多个可选参数？答案

【问题标题】：How to do multiple optional params with react-router?如何使用 react-router 执行多个可选参数？
【发布时间】：2019-09-12 06:55:21
【问题描述】：

我正在使用 "react": "^16.8.6" 和 "react-router": "^5.0.0"

我正在处理搜索页面。并且页面应该有一些过滤条件并且网址通常看起来像这样： /Search?SearchText=bachelor&State=New+South+Wales&CourseLevel=Diploma&CourseArea=农业

如何以 react-router 方式制作？

我在想我可以这样做，因为参数是可选的，所以路线可能是 /search/:CourseArea?/:State?/:CourseLevel?/:StudyMode?/:SearchText?

但是我怎么知道哪个查询在url中传递，哪个不传递？

提前致谢

【问题讨论】：

只需将具有这些条件的对象作为道具而不是查询参数传递。
我正在做类似的事情。我认为 generatePath 可以节省我的时间，但我没有预料到它不起作用。

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

只需使用query-string 解析参数并保持原样：

import queryString from 'query-string';

class SearchComponent extends React.Component{
 render(){
  // url is 'https://www.example.com/search?id=123&type=4';
  let url = this.props.location.search;
  let params = queryString.parse(url);
  console.log(params);
  // The result will be like below
  // { id: 123, type: 4 }
  // other code
 }
}

【讨论】：

这不是他要求的解决方案。即使我试图找到答案。