React Router v6.22中通过RouterContext获取上下文及通用路由升级方案

核心适配要点 #

React Router v6 相对于 v5 做了大量API精简，核心变化包括：

• Switch 组件替换为 Routes，且所有 Route 必须嵌套在 Routes 内部
• Route 的 component/render 属性替换为 element，需传入JSX元素
• 自定义路由渲染逻辑可直接用官方 useRoutes Hook 替代，无需手动递归
• 原 RouterContext 仍可访问，但官方更推荐使用专用Hook（如 useNavigate/useLocation）

对应文件改写方案 #

1. switch.js 替代实现（原v5 Switch封装 → v6 Routes封装） #

原v5的Switch封装可直接替换为Routes的通用封装，保持项目原有调用方式的兼容性：

// src/router/switch.js
import { Routes, Route } from 'react-router-dom';

export default function CustomSwitch({ routes }) {
  return (
    <Routes>
      {routes.map((route) => (
        <Route
          key={route.path}
          path={route.path}
          element={route.element}
          exact={route.exact} // v6中exact已默认生效，仅为兼容旧配置保留
        />
      ))}
    </Routes>
  );
}

2. renderRoutes.js 替代实现（原自定义渲染 → useRoutes Hook） #

v6的useRoutes可以直接接收路由配置数组并返回渲染好的路由树，完全替代原自定义递归逻辑：

// src/router/renderRoutes.js
import { useRoutes } from 'react-router-dom';

export default function RenderRoutes({ routes }) {
  // useRoutes接收路由配置数组，直接生成对应路由元素
  return useRoutes(routes);
}

// 路由配置格式示例（兼容原v5配置结构，仅调整element字段）
const exampleRoutes = [
  {
    path: '/',
    element: <HomePage />,
    children: [
      { path: 'about', element: <AboutPage /> }
    ]
  },
  { path: '*', element: <NotFoundPage /> }
];

3. react-client.js 入口文件调整 #

保持通用项目的可扩展性，将路由配置作为参数传入，同时用v6的BrowserRouter包裹：

// src/react-client.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import RenderRoutes from './renderRoutes';

export function renderApp(containerId, routes) {
  const root = ReactDOM.createRoot(document.getElementById(containerId));
  root.render(
    <BrowserRouter>
      <RenderRoutes routes={routes} />
    </BrowserRouter>
  );
}

// 项目侧调用示例
// import { renderApp } from './react-client';
// renderApp('root', projectRoutes);

v6.22 中获取 RouterContext 的方式 #

React Router v6 并未移除RouterContext，但拆分了内部上下文结构，推荐优先使用官方提供的专用Hook：

1. 常用场景替代方案：

   • 获取导航方法：const navigate = useNavigate();
   • 获取当前路由信息：const location = useLocation();
   • 获取路由参数：const params = useParams();

2. 若需直接获取RouterContext：
   v6.22中可直接导入并通过useContext访问：

   import { useContext } from 'react';
   import { RouterContext } from 'react-router';
   
   function MyComponent() {
     const routerContext = useContext(RouterContext);
     // routerContext包含history、location、match等核心路由信息
     console.log(routerContext.location.pathname);
     return <div>...</div>;
   }
   

   注意：官方不推荐直接依赖RouterContext，其内部结构可能在后续版本变更，优先使用稳定的公开Hook。

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