使用 React Router v6.6.1 和 Vite 在 Github Pages 上出现错误 404

2024-02-29

我正在尝试使用 Vite、React-Router-Dom-v6.6.1 和 Github Pages 发布我的第一个 React 应用程序，但由于某种原因index.html未检测到文件并显示“404 错误”，但是此错误显示在我添加的页面上，以处理可能的错误，并且有一个选项可以返回主页；然而这个主页是通过阅读index.html文件和相应的 javascript。但此时浏览器已经能够解释index.html文件和所有内容的行为与开发环境类似，没有错误。也就是说，由于某种原因，浏览器无法识别index.html文件在第一次加载时（我认为），即使路径指向base: "/presentation/"正在指向正确的地方。

下面是我发现最相关的文件，我的“Github Pages”（发生此问题的地方）的链接以及我针对这种情况制作的屏幕录制的链接，以便您可以更好地理解我想要解释的内容。

有问题的 Github 页面： https://cristianolm.github.io/presentation/

屏幕录制视频问题： https://youtu.be/b-R7g0JFcHk

VITE 文件

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import "./index.css";

// Redux Toolkit
import { Provider, useSelector } from "react-redux";
import store from "./reduxTlk/store";

/* existing imports */
import Root from "./routes/root";
import ErrorPage from "./error-page";
import Home from "./routes/home";
import WeatherStatus from "./routes/weatherStatus";
import { weatherLoader } from "./components/projects/ipma/TempTable";

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Root />} errorElement={<ErrorPage />}>
        <Route index element={<Home />} />
        <Route
          path="WeatherStatus"
          element={<WeatherStatus />}
          loader={weatherLoader}
        />
      </Route>
    </>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

包.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.7",
    "@reduxjs/toolkit": "^1.9.1",
    "dompurify": "^2.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.6.1"
  },
  "homepage": "https://cristianolm.github.io/presentation/",
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  base: "/presentation/",
  plugins: [react()],
});

dist/`index.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/presentation/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cristiano Martins</title>
    <script type="module" crossorigin src="/presentation/assets/index.6cda9410.js"></script>
    <link rel="stylesheet" href="/presentation/assets/index.85f54fc4.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

首先，我尝试使用以下方法进行生产构建base line: "/presentation/, in vite.config.js，然后我尝试在没有这一行的情况下执行相同的过程，最后我再次添加了该行，但我将其添加到包裹。 json线homepage": "https://cristianolm.github.io/presentation/,.

当然，我尝试在谷歌上搜索另一个解决方案，但没有成功。

我怀疑您可能只需要另外指定/指示路由器是从子目录运行的，超出了 package.json 和 vite.config 文件中已指定的内容。您可以指定一个basename https://reactrouter.com/en/main/routers/create-browser-router#basename路由器上与托管应用程序的目录相匹配的 prop，所有路由和链接都将相对于该位置工作。

basename

应用程序的基本名称（适用于无法部署到的情况）域的根目录，而是一个子目录。
createBrowserRouter(routes, {
  basename: "/app",
});

对于主机："https://cristianolm.github.io/presentation"

Example:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/" // <-- "/presentation"
      element={<Root />}
      errorElement={<ErrorPage />}
    >
      <Route
        index // <-- "/presentation"
        element={<Home />}
      />
      <Route
        path="WeatherStatus" // <-- "/presentation/WeatherStatus"
        element={<WeatherStatus />}
        loader={weatherLoader}
      />
    </Route>
  ),
  { basename: "/presentation" }
);

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)