React应用在本地及GitHub Pages均显示404组件而非首页组件

可能的原因及修复步骤 #

1. 本地开发路径不匹配 #

你设置了basename: '/arch-studio-multipage-website'，本地开发时需要访问http://localhost:3000/arch-studio-multipage-website/才能匹配首页路由，直接访问根路径/会触发path="*"的NotFound组件。

如果想本地直接访问根路径就显示首页，可以根据环境动态设置basename：

const basename = process.env.NODE_ENV === 'production' ? '/arch-studio-multipage-website' : '';

const router = createBrowserRouter({
  basename,
  routes: createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Home />} />
      <Route path="*" element={<NotFound />} />
    </Route>
  )
});

2. RootLayout未添加Outlet组件 #

父路由组件RootLayout必须渲染<Outlet />才能显示子路由内容（Home或NotFound）。检查你的RootLayout.js，确保包含以下代码：

import { Outlet } from 'react-router-dom';

function RootLayout() {
  return (
    <div>
      {/* 你的导航栏等布局内容 */}
      <Outlet /> {/* 子路由内容会渲染在这里 */}
    </div>
  );
}

export default RootLayout;

如果没有<Outlet />，子路由的内容永远不会显示，可能会让你误以为是NotFound组件在显示。

3. GitHub Pages部署配置缺失 #

在package.json中添加homepage字段，确保React生成正确的资源路径：

{
  "homepage": "https://AzureCloud9.github.io/arch-studio-multipage-website"
}

同时确认GitHub Pages的部署设置：

• 选择正确的分支（比如main）
• 选择/build作为部署文件夹（执行npm run build生成build文件夹后再部署）

4. 检查路由匹配优先级 #

确保index路由在path="*"路由之前，你的当前配置已经符合要求，后续添加其他路由时，也要保证更具体的路由放在通配符路由前面。

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