如何从子文件夹运行Vite React应用程序

Question

我使用Vite创建一个React应用程序。

路线.tsx

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 /> }
        ]
    }
];

export const router = createBrowserRouter(routes);

在我的 vite.config.ts 中我有

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

// https://vitejs.dev/config/
export default defineConfig({
  //base: '/registration/',
  server:{
    port: 3000
  },
  plugins: [react()],
})

一切都在

"http://127.0.0.1:3000/"

上运行得很好，但是在我的

vite.config.ts

中，当我取消注释

base: '/registration/',

并转到

"http://127.0.0.1:3000/registration/"

时，我得到了所有路线的所有 404 错误。我不确定在子文件夹中使用 Vite 运行 React 应用程序时缺少什么。

Answer 1

我认为缺少的部分是为 basename

 设置 

BrowserRouter 值以匹配其相对于其路由/导航的位置。

应用程序的基本名称，用于无法部署到的情况 域的根目录，但是一个子目录。

传递给路由器的

basename

应与Vite配置相匹配。

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

// https://vitejs.dev/config/
export default defineConfig({
  base: '/registration/',
  server:{
    port: 3000
  },
  plugins: [react()],
});

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

export const router = createBrowserRouter(routes, {
  basename: "/registration/",
});