如何使用react-router进行多个可选参数？

Question

我正在使用“反应”：“ ^ 16.8.6” 和“反应路由器”：“ ^ 5.0.0”

我正在搜索页面上。 并且页面应该有一些过滤条件 网址通常是这样的： / Search？SearchText = bachelor＆State = New + South + Wales＆CourseLevel = Diploma＆CourseArea =农业

我该如何以React-Router方式实现？

我曾经考虑过可以这样做，因为参数是可选的， 所以路线可能是 / search /：CourseArea？/：State？/：CourseLevel？/：StudyMode？/：SearchText？

但是我怎么知道哪个查询是通过url传递的，哪个不是？

预先感谢

Answer 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
 }
}