【VuReact】轻松实现 Vue 到 React 路由适配

路由适配功能采用 @vureact/router 适配包提供的完整解决方案，实现 Vue Router 到 React Router 的自动转换。

概述

本文基于 VuReact 编译器实现了 Vue Router 到 React Router 的自动转换功能。当检测到项目中的SFC或脚本文件包含路由相关代码时，将自动执行以下转换：

自动转换内容

<router-link> → <RouterLink>
<router-view> → <RouterView>
路由API调用：createRouter, useRouter(), useBeforeRouteUpdate()等
路由全局守卫：router.beforeEach() 等导航守卫保持相同的行为
路由元字段：to.meta 等元数据访问保持不变
嵌套路由：完整的嵌套路由支持
自动注入@vureact/router依赖

更多适配细节请参考 VuReact Router 官方文档。

依赖自动注入

编译器会自动检测并注入必要依赖：

javascript 复制代码

// 编译前（Vue 项目）
import { useRouter, createRouter, createWebHistory } from 'vue-router';

// 编译后（React 项目）
import { useRouter, createRouter, createWebHistory } from '@vureact/router';

编译器自动注入

要实现Vue Router自动适配，需按以下步骤配置，确保编译器能识别并处理路由配置文件：

一、配置路由参数（vureact.config.js）

在项目根目录的vureact.config.js（或.ts）中指定Vue Router配置文件路径：

示例：

ts 复制代码

import { defineConfig } from '@vureact/compiler-core';

export default defineConfig({
  // ...其他配置
  router: {
    /**
     * 必填：替换为你的 Vue Router 配置文件实际路径
     * 要求该文件必须通过 export default 导出 createRouter 的调用结果
     */
    configFile: 'src/router/index.ts',
  },
});

⚠ 若 output.bootstrapVite 设为 false，自动注入功能将失效，需参考手动适配方案。

二、调整Vue Router导出方式

确保路由配置文件通过export default导出createRouter调用结果：

示例：

ts 复制代码

// 调整前
import { createRouter, createWebHistory } from 'vue-router';
import App from '../App.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/', component: App}],
});

// 调整后：必须使用export default
export default createRouter({
  history: createWebHistory(),
  routes: [{ path: '/', component: App}],
});

三、验证自动注入结果

编译完成后，编译器将自动执行以下操作：

依赖替换：
- vue-router → @vureact/router
入口文件调整：
- 替换<App />为<RouterInstance.RouterProvider />

示例输出：

ts 复制代码

// 编译后的入口文件(main.tsx)
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import RouterInstance from './router/index';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterInstance.RouterProvider />
  </StrictMode>,
);

路由配置文件输出：

ts 复制代码

import { createRouter } from '@vureact/router';
export default createRouter({ ... });

🏄🏻‍♂️ 除包名变更外，所有API和行为保持不变，这正是@vureact/router的核心优势。

注意事项

output.bootstrapVite: false时将禁用自动注入
路由配置文件必须为标准Vue Router格式
仅替换路由相关API和组件，业务逻辑无需修改

手动适配方案

当自动注入不可用时，需手动完成适配：

一、适配前提

已完成项目编译(npx vureact build)
已安装@vureact/router
Vue Router配置文件为标准格式

二、核心步骤

步骤 1：调整路由导出

找到你的 Vue Router 配置文件（如 src/router/index.ts），确保导出 createRouter 创建的路由实例（支持任意导出方式，无需严格 export default）：

ts 复制代码

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../App.vue';

const routes = [
  {
    path: '/',
    component: App,
    children: [
      { path: 'dashboard', component: Dashboard },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export { router }; // 任意导出方式均可

步骤 2：修改 React 入口文件

找到编译后的 React 入口文件（如 src/main.tsx），移除原 <App /> 渲染，改为渲染 VuReact Router 的 RouterProvider：

ts 复制代码

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import { router } from './router/index';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <router.RouterProvider />
  </StrictMode>,
);

关键说明：

示例仅供参考，请根据实际的路由结构、React 入口文件及 <App /> 组件的具体实现进行调整。
若你的 <App /> 组件包含路由出口组件，需将 <App /> 作为根路由的 component 配置在路由规则中，而非直接渲染；
<RouterProvider /> 是 @vureact/router 提供的路由上下文组件，替代 React Router 原生的 RouterProvider，完全兼容 Vue Router 逻辑。

总结

手动适配要点：

确保导出有效路由实例
调整 React 入口文件，使用 RouterProvider 替代原 <App /> 渲染；
验证路由组件中的 API 调用和 <RouterView />/<RouterLink> 组件是否正常。

手动适配完全保留 Vue Router 的使用习惯（如路由守卫、meta 字段、嵌套路由），仅需调整依赖和渲染方式，无需重构路由逻辑。

验证与测试

编译完成后，请进入产物目录（例如 .vureact/react-app），并按以下步骤进行验证：

安装依赖 ：执行 npm install 命令。
启动项目 ：执行 npm run dev 命令。
测试路由跳转：在浏览器中访问应用，测试页面间的路由跳转功能是否正常。
验证嵌套路由：检查嵌套路由的视图渲染和层级关系是否正确。

链接

如果对你有帮助，点个 star 支持一下！