v6路由性能调优

React Router v6路由性能调优实践

随着React Router v6的普及，路由性能优化成为提升应用体验的关键环节。本文将从实际应用场景出发，分享v6版本下的性能调优方案。

动态导入与代码分割

在v6中，推荐使用lazy函数实现路由组件的动态导入：

import { BrowserRouter, Routes, Route, lazy, Suspense } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback="Loading...">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

路由缓存策略

v6引入了useNavigate和useLocation的组合使用来实现路由状态管理：

import { useLocation, useNavigate } from 'react-router-dom';

function CachedComponent() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 利用location.state进行缓存
  useEffect(() => {
    if (location.state?.cached) {
      // 使用缓存数据
      return;
    }
    // 获取新数据并设置缓存
    fetchData().then(data => {
      navigate(location.pathname, {
        state: { cached: true, data }
      });
    });
  }, []);
}

预加载优化

通过自定义Hook实现路由预加载：

const usePreload = (path) => {
  useEffect(() => {
    const preload = async () => {
      try {
        await import(`./pages${path}`);
      } catch (error) {
        console.error('Preload failed:', error);
      }
    };
    preload();
  }, [path]);
};

通过以上方案，可有效提升v6路由应用的加载性能与用户体验。