React Application Serving 404 Component Instead of Index on Both Local and GitHub Pages

I am working on a React application and facing an issue where the application is showing the 404 error component instead of the index component. This is happening both on my local development server as well as when the application is deployed to GitHub Pages.

My code is available on GitHub: arch-studio-multipage-website repository.

Here is my routing setup in App.js:

import { createBrowserRouter, Route, createRoutesFromElements, RouterProvider } from "react-router-dom";
import RootLayout from "./layout/RootLayout";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";

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

function App() {
  return <RouterProvider router={router} />;
}

export default App;


</details>


# 答案1
**得分**: 1

问题在于您错误地使用了 `createBrowserRouter`。根据[文档][1]，应该有两个参数 - 第一个参数应该是一个路由数组（在您的情况下，由 `createRoutesFromElements` 返回），第二个参数应该是一个包含选项的对象（在您的情况下是 `basename`）。

以下是修复后的 `router` 对象：
```jsx
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<RootLayout />} >
      <Route index element={<Home />} />
      <Route path='*' element={<NotFound />} />
    </Route>
  ),
  {
    basename: '/arch-studio-multipage-website',
  }
);

为了避免将来出现此类错误，我建议使用 TypeScript - 在这种情况下，TypeScript 应该能够检测到参数的类型不正确并指导您解决问题。

此外，您的 package.json 中缺少 react-router-dom 作为依赖项 - 您可能在全局安装了它，而不是在项目内部安装。在此项目的目录中运行 npm install react-router-dom 以修复此问题。

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<RootLayout />}>
      <Route index element={<Home />} />
      <Route path='*' element={<NotFound />} />
    </Route>
  ),
  {
    basename: '/arch-studio-multipage-website',
  }
);

答案2

得分: 0

我克隆了你的存储库并注意到了一些不同的情况：

1. 你需要通过 npm i react-router-dom 将 react-router-dom 安装到项目中。
2. 你将参数传递给 createBrowserRouter 的方式不正确。它的第一个参数应该是路由列表，第二个参数是选项。我成功地使它正常工作，通过将它更改为以下内容：

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

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