react-router-dom生产环境URL变更但页面不刷新问题求助

将react-router-dom从6.3.0升级至6.12.1版本后，生产构建出现异常：点击页面中的NavLink链接时，地址栏URL正常变更，但页面内容无更新；刷新页面后，新URL对应的内容可以正常加载。开发模式下所有功能正常，尝试改用createBrowserRouter后问题依旧。

关键代码片段 #

Index.tsx #

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

App.tsx #

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Header } from './common/Header';
import { Home } from './home/Home';
const Do = lazy(() => import('./do/Do'));
const SizeIndicator = lazy(() => import('./common/SizeIndicator'));
const FourOhFour = lazy(() => import('./common/FourOhFour'));

export const App = () => {
  return (
    <div>
      <Suspense fallback="...">
        <BrowserRouter>
          <div>
            <Header />
            <Routes>
              <Route path="/do" element={<Do />} />
              <Route path="/" element={<Home />} />
              <Route path="*" element={<FourOhFour />} />
            </Routes>
          </div>
        </BrowserRouter>
        <SizeIndicator />
      </Suspense>
    </div>
  );
};

Header.tsx #

import { NavLink} from 'react-router-dom';

return <div>
  <NavLink key="/" className="nav-link" to="/" end>Home</NavLink>
  <NavLink key="/do" className="nav-link" to="/do" end>Do</NavLink>
</div>

1. 调整Suspense的包裹范围 #

当前代码中Suspense包裹了整个BrowserRouter，这可能导致生产环境下路由切换时，懒加载组件的更新没有被正确触发。应将Suspense移动到BrowserRouter内部，仅包裹需要懒加载的路由组件：

修改后的App.tsx：

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Header } from './common/Header';
import { Home } from './home/Home';
const Do = lazy(() => import('./do/Do'));
const SizeIndicator = lazy(() => import('./common/SizeIndicator'));
const FourOhFour = lazy(() => import('./common/FourOhFour'));

export const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Header />
          <Suspense fallback="...">
            <Routes>
              <Route path="/do" element={<Do />} />
              <Route path="/" element={<Home />} />
              <Route path="*" element={<FourOhFour />} />
            </Routes>
          </Suspense>
        </div>
      </BrowserRouter>
      <Suspense fallback="...">
        <SizeIndicator />
      </Suspense>
    </div>
  );
};

2. 优化Redux Persist的初始化时机 #

如果项目中使用了Redux Persist，状态持久化的时机可能与路由初始化冲突，导致路由无法正确监听URL变化。可以在PersistGate的onBeforeLift回调中添加延迟，确保路由完全初始化：

修改Index.tsx：

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate 
        loading={null} 
        persistor={persistor}
        onBeforeLift={() => new Promise(resolve => setTimeout(resolve, 0))}
      >
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

3. 临时禁用React Strict Mode排查 #

虽然开发模式下Strict Mode功能正常，但生产环境下的Strict Mode优化可能影响路由更新逻辑。可以暂时禁用Strict Mode测试是否解决问题：

修改Index.tsx：

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

4. 清理构建缓存并重新打包 #

生产构建的缓存可能残留旧版本的路由逻辑，导致新代码未生效。清理构建目录后重新执行构建命令，确保所有代码都是最新版本。

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