React 的路由到底怎么无缝切换？react-router-dom 能实现哪些高级玩法？

在现代前端开发中，React Router已成为构建单页面应用的核心技术。通过react-router-dom实现的无缝路由切换，不仅保持了应用的流畅体验，更支持从基础路径匹配到复杂权限控制的全场景需求。本文将深入解析动态路由匹配、嵌套路由等6大高级功能，带您掌握生产环境级别的路由配置技巧。

npx create-react-app router-demo
cd router-demo
npm install react-router-dom@6

在src/index.js中初始化路由上下文：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

使用React.lazy + Suspense组合实现按需加载：

const Profile = React.lazy(() => import('./Profile'));

<Suspense fallback={<Loading />}>
  <Routes>
    <Route path="/profile" element={<Profile />} />
  </Routes>
</Suspense>

通过useNavigate钩子实现路由预加载：

const navigate = useNavigate();

const handleHover = () => {
  import('./Dashboard').then(module => {
    // 预加载组件
  });
};

结合CSS Transition实现路由切换动画：

.page-enter {
  opacity: 0;
  transform: translateX(100%);
}
.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms;
}

使用useParams捕获动态参数：

// 路由配置
<Route path="/user/:id" element={<UserProfile />} />

// 组件内获取参数
const { id } = useParams();

实现多层路由结构：

<Route path="/admin" element={<AdminLayout />}>
  <Route index element={<Dashboard />} />
  <Route path="users" element={<UserList />} />
</Route>

创建鉴权高阶组件：

const PrivateRoute = ({ children }) => {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
};

// 使用示例
<Route
  path="/dashboard"
  element={<PrivateRoute><Dashboard /></PrivateRoute>}
/>

通过useLocation传递状态：

navigate('/payment', {
  state: { productId: 123 }
});

// 目标组件获取
const location = useLocation();
const productId = location.state?.productId;

实现带滚动恢复功能的路由：

const ScrollRoute = ({ element, ...rest }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location]);

  return <Route {...rest} element={element} />;
};

使用StaticRouter处理SSR：

import { StaticRouter } from 'react-router-dom/server';

const html = renderToString(
  <StaticRouter location={req.url}>
    <App />
  </StaticRouter>
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        lazy: () => import("./HomePage")
      },
      {
        path: "about",
        lazy: () => import("./AboutPage")
      }
    ]
  }
]);

使用react-router-dom的keepalive方案：

<Routes>
  <Route element={<KeepAlive max={5} />}>
    <Route path="/list" element={<ProductList />} />
    <Route path="/detail/:id" element={<ProductDetail />} />
  </Route>
</Routes>