Как изменить URL с помощью react-router

#reactjs #url #react-router #browser-history

#reactjs #url #react-router #браузер-история

Вопрос:

У меня есть какой-то компонент

 import { RouteComponentProps, withRouter } from 'react-router';
function MySearchComponent({ match, location, history }: RouteComponentProps) {
  const [query, setQuery] = useState<string>('');
  useEffect(() => {
    console.log('all fine!')
    history.replace(`/my_search_page?query=${query}`);
  }, [query]);
  // some code for change query
}

export const MySearch = withRouter(MySearchComponent);
  

Что не так? Я пытался использовать history.push
консоль.журнал изменяется сразу после изменения запроса, но ничего не произошло

UPD: Извините. Это была моя ошибка: мое приложение просто не поддерживает параметры поиска Спасибо за вашу помощь

Комментарии:

1. console.log() не вызывается? Не могли бы вы добавить еще немного кода? Вы уверены, что запрос изменяется?

2. Да, это называется нормально, и да, запрос изменен

Ответ №1:

В моем приложении я использую useHistory hook

 import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

const Operations = () => {
  const history = useHistory();

  useEffect(() => {
    const res = prepareURLParams(filters);
    history.push(getRouterString("/", res));
  }, [filters]);
}

export default Operations;
  

Комментарии:

1. @NachoZullo Я читал эту статью medium.com/@Charles_Stover / … и нашел этот текст «встроенный withRouter HOC react-router не перерисовывает компоненты при изменении маршрута «, Возможно, это имеет смысл…

2. Извините. Это была моя ошибка: мое приложение просто не поддерживает параметры поиска Спасибо за вашу помощь

3. @Dmitry Какое приложение не поддерживает параметры запроса (поиска)? Это мобильное приложение?

4. @Alexey Мое веб-приложение — это крошечный микросервис, работающий в большом веб-приложении. Я попытался изменить URL /blah-blah-blah -адрес без параметров поиска, и он работает нормально. Похоже на вырезание параметров поиска из URL в базовом компоненте