Как выполнить несколько дополнительных параметров с помощью react-router?

#reactjs #react-router #react-router-v4 #react-router-dom

Вопрос:

Я использую «react»: «^ 16.8.6» и «react-router»: «^ 5.0.0»

Я работаю над страницей поиска. И на странице должно быть какое-то условие фильтрации, а URL-адрес должен выглядеть следующим образом: /Search?searchText= бакалавриат и штат= Новый Южный Уэльс и уровень курса = Диплом и область курса = Сельское хозяйство

как мне сделать это с помощью react-router?

Я думал о том, что могу сделать это таким образом, потому что параметры необязательны, поэтому маршрут может быть /search/:CourseArea?/:State?/:CourseLevel?/:StudyMode?/:searchText?

но как мне узнать, какой запрос передается в URL, а какой нет?

Заранее благодарю

1. Просто передайте объект с этими условиями в качестве реквизита вместо параметров запроса.

2. Я работаю над чем-то подобным. Я думал, что generatePath мог бы спасти мой день, но это работает не так, как я ожидал.

Ответ №1:

Просто используйте query-string для анализа аргумента и оставьте свой маршрут как есть:

 import queryString from 'query-string';

class SearchComponent extends React.Component{
 render(){
  // url is 'https://www.example.com/search?id=123amp;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
 }
}