React-router-dom：Vite 配置和 gh-pages 上出现错误 404

Question

在 GitHub 上部署 React 应用程序（使用 gh-pages）后，我遇到了导航问题。该网站采用以下 URL 作为主页： https://1kiritos1.github.io/,

而主页应该是： https://1kiritos1.github.io/youtube-clone/

我需要网站导航依赖于上述 URL，例如： https://1kiritos1.github.io/youtube-clone/video/***
或者
https://1kiritos1.github.io/youtube-clone/channel/***

应用程序

import React from 'react';
import { Box } from '@mui/material';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { Navbar, Feed, VideoDetail, ChannelDetail, SearchFeed } from './components';

function App() {
    return (
        <Router>
            <Box>
                <Navbar />
                <Routes>
                    <Route exact path="/" element={<Feed />} />
                    <Route path="/video/:id" element={<VideoDetail />} />
                    <Route path="/channel/:id" element={<ChannelDetail />} />
                    <Route path="/search/:searchTerm" element={<SearchFeed />} />
                </Routes>
            </Box>
        </Router>
    )
}
export default App;

指数

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './style.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
)

包.json：

"name": "youtube_clone",
  "homepage": "/youtube-clone/#",
  "private": true,
  "version": "0.0.0",
  "type": "module",

Vite.config.js：

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

export default defineConfig({
  base: '/youtube-clone/', // Base url of the website
  plugins: [react()]
});

我尝试使用 basename="youtube-clone/"，并按照这些解决方案进行更改，但这些都对我没有帮助。该站点在本地服务器上正常运行。也许是 vite 配置的问题，我不知道。（如果您需要任何其他信息，请告诉我，谢谢）

Answer 1

使用删除构建文件

rm -rf build

更改文件 package.json 中的以下数据

"homepage": "./",

使用创建新版本

npm run build

更改文件 package.json 中的以下数据

"homepage": "<github url>",