Блог

Главная - Вопросы по программированию - React Router Dom не распознает URL с параметрами запроса

React Router Dom не распознает URL с параметрами запроса

#javascript #reactjs #react-router-dom

#javascript #reactjs #react-router-dom

Вопрос:

Я столкнулся с проблемой использования параметров запроса и react router dom.

Когда я выполняю вызов API и он возвращает мне статус 200, я перенаправляю пользователя на страницу результатов с помощью history.push. Пока все работает нормально. Однако, когда я нахожусь на странице результатов и обновляю страницу, я хочу использовать URL с параметрами запроса для выполнения нового поиска, к сожалению, React Router Dom не может распознать URL и перенаправляет меня.

App.tsx

 <PrivateRoute path="/search?value=:searchValueamp;type=:searchType">
  <Dashboard />
</PrivateRoute>
<Route path="/redirection" component={RedirectionPage} />
<Redirect to="/login" />

Search.tsx

 history.push({
  pathname: `/search?${formattedSearch
    .map((search) => `value=${search.value}amp;type=${search.type}`)
    .toString()
    .replace(",", "|")}`,
  state: search
});

Этот history.push отлично работает и перенаправляет пользователя на нужную страницу.

Но когда я обновляю страницу с тем же URL, React Router Dom не распознает маршрут и не перенаправляет меня на компонент.

У вас есть какие-нибудь идеи? Спасибо и желаю вам хорошего дня.

Ответ №1:

Параметры сопоставления маршрутов — это не то же самое, что параметры строки запроса URL.

Вы захотите получить доступ к строке запроса из объекта location .

 {
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string', <-- query string
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Демонстрация параметров запроса React-router-dom

Они создают пользовательский useQuery хук:

 const useQuery = () => new URLSearchParams(useLocation().search);

Для вашего варианта использования на странице, отображающей Dashboard , которую вы хотите затем извлечь, параметры строки запроса. Учитывая path='/search?value=:searchValueamp;type=:searchType' :

 const query = useQuery();

const email = query.get('value');
const token = query.get('type');

Компонент на основе классов?

Если Dashboard это компонент на основе класса, то вам нужно будет получить доступ props.location и обработать строку запроса самостоятельно в методе жизненного цикла. Это связано с тем, что перехватчики React корректно используются только функциональными компонентами.

 componentDidMount() {
  const { location } = this.props;
  const query = new URLSearchParams(location.search);
  
  const email = query.get('value');
  const token = query.get('type');
  ...
}

Примечание относительно пути

 path='/search?value=:searchValueamp;type=:searchType'

Параметры пути относятся только к части пути URL-адреса, вы не можете определить параметры для части URL-адреса queryString. Приведенный выше путь эквивалентен path='/search' from react-router-dom ‘s perspective .

 <PrivateRoute path="/search">
  <Dashboard />
</PrivateRoute>
Метки: