我正在使用 “ react ”:“^16.8.6”和 “ react 路由器”:“^ 5.0.0”
我在搜索页面上工作。
并且页面应该有一些过滤条件
并且 url 以常规方式如下所示:
/Search?SearchText=学士&State=New+South+Wales&CourseLevel=Diploma&CourseArea=农业
我如何以 react 路由器的方式制作它?
我想我可以这样做,因为参数是可选的,
所以路线可能是
/search/:CourseArea?/:State?/:CourseLevel?/:StudyMode?/:SearchText?
但是 我怎么知道哪个查询在 url 中传递,哪个不是?
预先感谢
最佳答案
只需使用 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
}
}
关于reactjs - 如何使用 react-router 执行多个可选参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55805277/