History.pu sh не работает при перенаправлении на тот же путь, но с другим параметром маршрута - PullRequest
Новая
       10

History.pu sh не работает при перенаправлении на тот же путь, но с другим параметром маршрута

0 голосов
/ 17 июня 2020

У меня следующий маршрут "/event/:eventId"

Когда пользователь заходит с домашней страницы, а затем нажимает на карточку, он перенаправляется на страницу события (до сих пор все работает нормально)

Но внутри страницы событий у меня есть другие карты, которые перенаправляют на другие страницы событий с другими идентификаторами в качестве параметров маршрута, и при нажатии на них просто изменяется путь, но не повторно отображается страница.

Кажется что если я нахожусь на странице с тем же именем пути, не имеет значения, изменятся ли параметры маршрута, он не будет повторно отображать страницу.

Я пытался использовать компонент <Link> вместо history.push, но он тоже не работает.

Это функция перенаправления: 

 const onCardClick = () => {
    history.push(
      EVENT_PAGE_LOCATION.toUrl({
        eventId: event?.id,
      }),
    );
  };

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Получается, что страницы перерисовывались, но не размонтировались, чтобы снова выполнить запросы graphql.

Так что это важно, React Router не размонтирует страницы .

Мне приходилось обновлять запросы каждый раз, когда менялись параметры: 

useEffect(() => { 
 refetchEvent()
}, [params])
0 голосов
/ 17 июня 2020

Компонент будет повторно отрисован при изменении маршрута. См. Ниже, который также работает, если вы замените Link элементом onClick, передаваемым в объект истории. Я подозреваю, что проблема в том, что содержимое компонента не имеет никакого отношения к идентификатору, который вы нажимаете. Убедитесь, что реквизиты, переданные компоненту в маршруте, отражают этот идентификатор, или что компонент определяет свое собственное содержимое на основе параметра id при монтировании / изменении. 

const {
  BrowserRouter,
  Link,
  Route
} = window.ReactRouterDOM;

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/:id" component={Child} />
      </BrowserRouter>
    </div>
  );
}

function Child() {
  console.log('rendered');
  const random = Math.floor(Math.random()*10);
  return <Link to={`/${random}`}>Go to {random}</Link>;
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<div id="root"></div>
...