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

Question

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

我在搜索页面上工作。并且页面应该有一些过滤条件，并且 url 以常规方式看起来像这样： /Search?SearchText=bachelor&State=New+South+Wales&CourseLevel=Diploma&CourseArea=Agriculture

我如何以反应路由器的方式制作它？

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

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

预先感谢

Answer 1

只需使用查询字符串来解析参数并保持路由不变：

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