React-Router-Dom部署GitHub Pages遇404及导航路径问题求助

问题分析 #

当前核心问题是部署后站点默认指向https://1kiritos1.github.io/，而非期望的https://1kiritos1.github.io/youtube-clone/，且子路径（如/video/***、/channel/***）无法正常匹配。结合你的代码，问题出在路由配置与Vite/gh-pages的base路径不匹配，以及HashRouter的特性导致路径格式不符合预期。

方案1：继续使用HashRouter（快速修复） #

若想保留HashRouter，只需调整以下配置：

1. 修正package.json的homepage #

移除homepage中的#，改为：

"homepage": "https://1kiritos1.github.io/youtube-clone/"

或更通用的相对路径：

"homepage": "/youtube-clone/"

2. 给HashRouter添加basename属性 #

在App.js中，给HashRouter传入basename="/youtube-clone"，确保路由匹配正确的根路径：

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 basename="/youtube-clone">
            <Box>
                <Navbar />
                <Routes>
                    <Route 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;

3. 重新构建并部署 #

执行构建命令：

npm run build

再重新部署到gh-pages：

gh-pages -d dist

此时路径会变为https://1kiritos1.github.io/youtube-clone/#/、https://1kiritos1.github.io/youtube-clone/#/video/xxx，导航可正常工作。

方案2：切换到BrowserRouter（匹配无#路径） #

若想要完全符合预期的路径格式（如https://1kiritos1.github.io/youtube-clone/video/xxx），需改用BrowserRouter，并处理gh-pages的404重定向问题：

1. 修改路由组件为BrowserRouter #

更新App.js：

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

function App() {
    return (
        <Router basename="/youtube-clone">
            <Box>
                <Navbar />
                <Routes>
                    <Route 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;

2. 配置gh-pages的404重定向 #

在项目的public目录下创建404.html文件，内容和index.html完全一致。这是因为gh-pages在访问非根路径时会返回404，需要让服务器重定向到index.html，由React Router处理路由。

3. 保持Vite和package.json配置不变 #

Vite.config.js的base: '/youtube-clone/'保留，package.json的homepage设置为"https://1kiritos1.github.io/youtube-clone/"。

4. 重新构建部署 #

执行：

npm run build
gh-pages -d dist

此时路径会完全符合预期：

• 首页：https://1kiritos1.github.io/youtube-clone/
• 视频页：https://1kiritos1.github.io/youtube-clone/video/xxx
• 频道页：https://1kiritos1.github.io/youtube-clone/channel/xxx

关键注意点 #

• Vite的base配置必须和Router的basename、package.json的homepage保持一致，否则会出现路径不匹配。
• 使用BrowserRouter时，必须添加404.html，否则刷新子页面会显示404错误。
• 确保Navbar中的导航链接使用React Router的Link组件，而非原生<a>标签，否则会触发页面刷新导致路由失效。

内容的提问来源于stack exchange，提问作者Roman S.