如何在不重置 Redux Store 的情况下在 React 中重定向？

Question

我正在尝试在 React 中构建导航栏。我正在使用 redux-toolkit store 来管理我的状态。每当我单击导航栏上的 link 时，redux 存储都会重置为初始状态。如何构建不会重置 redux 存储的导航栏 link？

我的NavBar-

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

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

我的dataSlice-

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

我的store

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

Answer 1

我将此作为答案发布，因为我想我的评论有用！

您从 @material-ui/core 导入的 Link 仅用于样式目的。它呈现一个普通的 a 标记，单击 link 将导致页面硬重新加载。

您需要使用 react-router-dom 中的 Link 组件。该组件通过 to 属性而不是 href 处理内部导航。这将导致页面导航，同时仍保持 Redux 商店和任何其他应用程序状态。

您或许可以组合这两个组件来获得 material-ui 样式。但重要的是导航需要经过react-router-dom.

如何在不重置 Redux Store 的情况下在 React 中重定向？

How to redirect in React without resetting Redux Store?

reactjs

redux

redux-toolkit