Как сохранить React-компонент или его стейт при переходе на другую страницу?

Question

Есть два компонента. Страница со списком фильмов и отдельная страница, под конкретный выбранный фильм (использую react-router v6). Фрагмент верстки

<Routes>
 <Route path="/" element={<MoviesPage/>}/>
 <Route path="/movie/:id" element={<MoviePage/>}/>
</Routes>

На главной странице компонента <MoviesPage/>, есть пагинация,где меняя стейт будет отображаться новый список фильмов. Если юзер перешел на 5 страницу списка фильмов и затем решил выбрать из этого списка конкретный фильм, то есть перешел на компонент , и вернется обратно, то стейт номера страницы будет сброшен в начальный номер страницы = 1. Это из-за того, что компонент <MoviesPage/> был удален из верстки

Вопрос. Как можно сохранить стейт - номер страницы, вернувшись обратно в компонент <MoviesPage/>? Пробовал использовать localStorage, но может есть другие варианты?

Answer 1

Можно использовать react context https://ru.reactjs.org/docs/context.html или стейт менеджер redux, mobx. Добавьте стейт номера страницы и его изменение в провайдер и тогда не будет сбрасываться.

export const StateContext = createContext();

const [page, setPage] = useState(1);

<StateContext.Provider value={{ page, setPage }}>
    <Routes>
       <Route path="/" element={<MoviesPage/>}/>
       <Route path="/movie/:id" element={<MoviePage/>}/>
    </Routes>
</StateContext.Provider>

БЛОГ НА HUSL

Как сохранить React-компонент или его стейт при переходе на другую страницу?

Ответы (1 шт):