最新版本react 18 react-router-dom6 reduxjs/toolkit redux-perseist 以及中间件配置

在React 18中，你可以使用react-router-dom的最新版本6，结合reduxjs/toolkit和redux-persist来管理状态。以下是安装和配置的示例代码：

1. 安装最新版本的依赖：

npm install react-router-dom@6
npm install @reduxjs/toolkit
npm install redux-persist
npm install react-redux

2. 配置Redux和Redux Persist：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
 
// 定义reducer
const rootReducer = { /* ... */ };
 
// 配置redux-persist
const persistConfig = {
  key: 'root',
  storage,
};
 
const persistedReducer = persistReducer(persistConfig, rootReducer);
 
// 创建store
export const store = configureStore({
  reducer: persistedReducer,
});
 
export const persistor = persistStore(store);

3. 在React应用中使用Redux和React Router：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { store, persistor } from './store';
 
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

确保你的./App路径指向你的根组件。这样，你就设置了一个使用最新版本的React Router、Redux和Redux Persist的React应用。