React 18与react-redux、react-router兼容性及配置咨询

一、依赖兼容性说明 #

• react-redux：你当前的7.2.x版本不兼容React 18，必须升级到8.0.0及以上版本。这个版本专门适配了React 18的并发渲染特性，同时完全兼容你现有的Redux 4.x.x版本，无需额外升级Redux。
• redux：4.x.x版本完全兼容React 18，不用做任何升级。
• react-router-dom：5.x.x版本和React 18不兼容，需要升级到6.x.x版本。注意5.x里的Switch、ConnectedRouter等API在6.x中有较大变化，需要同步调整路由写法。

二、createRoot 与 Provider 的配置 #

createRoot完全支持包裹react-redux的Provider，配置逻辑和之前的ReactDOM.render几乎一致，只是渲染入口写法改变。

原React 17写法： #

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

升级到React 18后的写法： #

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Provider的用法没有任何变化，依然是将Redux store传入，作为整个应用的状态容器。

三、路由部分的适配调整 #

由于你之前用的是react-router-dom 5.x，升级到6.x后需要做以下关键调整：

1. 将Switch替换为Routes组件
2. 路由配置从component/render属性改为element属性，传入JSX元素
3. 如果使用ConnectedRouter（来自connected-react-router），需要将connected-react-router升级到适配react-router-dom 6的版本（v6.x），否则建议改为BrowserRouter结合Redux状态管理的方式。

原路由写法示例（React 17 + react-router-dom 5）： #

import { ConnectedRouter } from 'connected-react-router';
import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </ConnectedRouter>
  );
}

升级后的路由写法示例（React 18 + react-router-dom 6）： #

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';

function App() {
  // 若需Redux管理路由状态，确保connected-react-router已升级到v6版本
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

内容的提问来源于stack exchange，提问作者Blankman