如何从子目录运行Vite React应用？路由404问题求助

当你在Vite中设置base: '/registration/'后，应用的根路径变为/registration/，但react-router-dom并未自动适配这个base路径，导致路由解析错误出现404。需要做以下两处配置同步：

1. 给React Router配置basename #

修改Routes.tsx中的createBrowserRouter初始化代码，添加basename参数，值与Vite的base保持一致：

import { RouteObject, createBrowserRouter } from "react-router-dom";
import App from "../layout/App";
import HomePage from "../../feautures/home/HomePage";
import CreateRegistration from "../../feautures/createRegistration/createRegistration";

export const routes: RouteObject[] = [
    {
        path: '/',
        element: <App />,
        children: [
            { path: '', element: <HomePage /> },
            { path: 'createRegistrationForm', element: <CreateRegistration /> }
        ]
    }
];

// 添加basename参数，匹配Vite的base配置
export const router = createBrowserRouter(routes, { 
  basename: '/registration/' 
});

2. 确保Vite的base配置生效 #

确认vite.config.ts中的base配置已取消注释：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  base: '/registration/', // 已启用
  server:{
    port: 3000
  },
  plugins: [react()],
})

验证访问 #

重启Vite开发服务器后，访问以下路径即可正常加载对应页面：

• 首页：http://127.0.0.1:3000/registration/
• 注册表单页：http://127.0.0.1:3000/registration/createRegistrationForm

原理说明：Vite的base设置定义了应用资源和路由的根路径，而React Router的basename会让所有路由路径都基于这个前缀解析，两者保持一致才能保证路由正确匹配。

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