Реагируйте: компонент перемонтируется при изменении маршрута

Question

Я работаю над приложением реагирования. Есть страница панели инструментов, где отображается список фильмов. Когда пользователь нажимает любую кнопку mov ie, отображается страница сведений о нажатой кнопке mov ie.

На кнопке mov * 1020 есть кнопка, позволяющая пользователям go вернуться на страницу панели мониторинга. * подробная страница.

Когда я нажимаю кнопку go назад, страница панели инструментов перемонтируется (состояние потеряно) и componentDidMount метод жизненного цикла снова вызывается.

I не хочу, чтобы компонент был перемонтирован, и он должен содержать старое состояние. Вот файл router config:

    <Switch>
        <Route exact path="/movies" component={Movies} key="page1"/>
        <Route exact path="/movies/detail/:id" component={MovieDetail} key="page2" />
        <Redirect to="/movies" exact component={Movies} />
    </Switch>

Вот метод, вызываемый по кнопке возврата. :

goBack = ()=>{
        this.props.history.goBack();
    }

Я использую "react-router-dom": "^5.1.2", в своем приложении.

Answer 1

, конечно, самый популярный способ - хранить данные панели мониторинга в каком-либо хранилище, например, redux или sessionStorage (для сохранения данных по событию refre sh), и восстанавливать данные на componentDidMount

Но я могу предложить экспериментальное решение, чтобы избежать componentDidMount. Прежде всего вам необходимо объединить два маршрута в один путь через массив

<Switch>
  <Route path={["/movies", "/movies/detail/:id"]} component={Movies} />
  <Redirect to="/movies" exact component={Movies} />
</Switch>

Затем необходимо обновить компонент Movies

const Movies = () => {
  const [counter, setCounter] = useState(0);
  const { id } = useParams();

  const increment = useCallback(() => setCounter(counter + 1), [counter]);

  if (id) {
    return <MovieDetail id={id} />
  }

  return <button onClick={increment}>{counter}</button>
}

В результате history.goBack не повлияет на localState Фильм компонент