Как сделать редирект в React без сброса Redux Store?

Я пытаюсь создать панель навигации в React. Я использую магазин redux-toolkit для управления своим состоянием. Каждый раз, когда я нажимаю ссылку на панели навигации, хранилище redux сбрасывается в исходное состояние. Как создать ссылку на панели навигации, которая не сбрасывает хранилище redux?

My NavBar -

import {
  Breadcrumbs,
  Link,
} from '@material-ui/core';

<Breadcrumbs aria-label="breadcrumb">
 <Link href="/">
   Home
 </Link>
</Breadcrumbs>

My dataSlice -

export const dataSlice = createSlice({
  name: 'data',
  initialState: {
    data: 'data'
  },
  reducers: {
    setData: (state, action) => {
      state.data = action.payload;
    },
  },
});

My store

export default configureStore({
  reducer: {
   data: dataReducer,
  },
});

person yihom78241    schedule 15.03.2021    source источник
comment
Я считаю, что на ваш вопрос можно ответить с помощью stackoverflow.com/questions/47982635/. Причина в том, что переадресация функционально ничем не отличается от простой перезагрузки страницы при условии, что домен тот же. I.E. вы все еще находитесь на том же сайте. Если он не ответит на ваш вопрос, дайте мне знать. Если он все еще есть, дайте мне знать, чтобы мы могли связать другой вопрос для будущих пользователей. Также добро пожаловать на переполнение стека.   -  person R Esmond    schedule 15.03.2021
comment
Вы можете исправить это, используя response-router-dom для обработки вашей навигации и используя компонент Link из response-router-dom для навигации без полной перезагрузки страницы.   -  person Linda Paiste    schedule 15.03.2021
comment
В этом случае ответ Линды Пайсте сработает. Это предполагает использование совершенно новой библиотеки для имитации навигации, но если вы хотите избежать localStorage, это то, что вам нужно. По сути, вы спрашиваете, как создать одностраничное приложение, которое будет перемещаться без перенаправления.   -  person R Esmond    schedule 15.03.2021
comment
@LindaPaiste Ваше решение работает. Спасибо.   -  person yihom78241    schedule 15.03.2021
comment
@ yihom78241 Вы уже используете response-router-dom для обработки маршрутизации? И просто использовали неправильный Link компонент?   -  person Linda Paiste    schedule 15.03.2021
comment
@LindaPaiste Да, вот что случилось.   -  person yihom78241    schedule 19.03.2021


Ответы (1)


Я отправляю это как ответ, так как полагаю, что мой комментарий сработал!

Link, который вы импортируете из @material-ui/core, предназначен только для стилизации. Он отображает простой тег a, и щелчок по этой ссылке приведет к полной перезагрузке страницы.

Вам необходимо использовать компонент Link из react-router-dom. Этот компонент обрабатывает внутреннюю навигацию через свойство to вместо href. Это заставит страницу перемещаться, сохраняя при этом хранилище Redux и любое другое состояние приложения.

Вероятно, вы можете объединить два компонента, чтобы получить стиль material-ui. Но главное, чтобы навигация проходила через react-router-dom.

person Linda Paiste    schedule 22.03.2021