找不到页面 - React/vite 应用程序未在 github 页面上正确路由

Question

我将我的应用程序部署到

gh-pages

并且根目录可以工作，但是每当我重新路由或尝试添加到根目录时，我都会收到页面未找到错误。在本地有效。

我看到人们建议从

<BrowserRouter>

更改为

<HashRouter>

但这没有帮助。我还看到甚至使用了

create-react-app

或

webpack

的解决方案，其中您将一些代码添加到

index.html

目录中的

public

文件以及

404.html

但问题是

vite

具有不同的文件结构。

我会将它们放在

vite

应用程序中的什么位置，而

public

目录中没有任何内容。它确实有一个

dist

文件夹和一个

index.html

但我不确定这是否是那个。

不确定我需要显示什么代码，但这是我的

main.jsx

和

App.jsx

文件：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Header />
      <div className="app">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/example" element={<Example />} />
        </Routes>
      </div>
    </Router>
  );
}


ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

同样，在本地这是有效的，并且当部署到

gh-pages

根或主页时有效，但没有扩展路由。就像我说的，我对

webpack

也有类似的问题，但我得到的解决方案不起作用，因为

vite

具有不同的文件结构，所以我不确定如何添加正确的文件。

编辑：我还看到了一个 github issue，其中用户遇到了类似的问题，解决方案是在

vite.config.js

中定义路由，但区别在于用户为每个组件/有多个

index.html

文件/路线。我只是有标准的

<BrowserRouter>

情况来包裹我的路线。

Answer 1

在公共文件夹中添加

404.html

：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Not Found</title>
    <script>
      sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/'" />
  </head>
  <body></body>
</html>

这个 JS 位于根目录的

index.html

结束

</body>

标签之前：

    <script>
      (() => {
        const redirect = sessionStorage.redirect;
        delete sessionStorage.redirect;
        if (redirect && redirect !== location.href) {
          history.replaceState(null, null, redirect);
        }
      })();
    </script>

最后重新配置

vite.config.js

文件：

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        404: resolve(__dirname, "public/404.html"),
      },
    },
  },
});

Answer 2

这里的要点是了解 GH 页面如何服务静态文件。如果没有与给定 URL 匹配的文件，它会自动提供

404.html

。所以我们只需要有

404.html

，它的内容与我们从 vite build 中获得的

index.html

相同。

因此，您只需将

index.html

复制到
404.html
目录中的
dist
即可。

我不确定你如何管理 GH 页面发布。

如果您使用 Github Actions，请添加自定义步骤以将
```
index.html
```
复制到
```
404.html
```
。
```
cp ./dist/index.html ./dist/404.html
```
如果您使用
```
gh-pages
```
分支，我认为您应该在将更改推送到分支之前将
```
index.html
```
复制到
```
404.html
```
。

我创建了一个公共存储库，您可以查看以供参考。 https://github.com/richard929/vite-gh-pages-example

我使用了react-router v6和github actions来发布GH页面。希望您在将 Vite 应用部署到静态网站时，已经了解了

base

的

vite

配置。

Answer 3

无论谁使用react-router-dom来到这里并使用带有gh-pages npm包的任何分支进行部署，你都必须将其添加到你的App.tsx中

import SignIn from './pages/Signin'

function App() {
return (
  <BrowserRouter basename="/your-repositorie-name">
    <Routes>
      <Route path="/" element={<SignIn />} />
    </Routes>
  </BrowserRouter>
)
}

export default App

您还必须将其添加到 vite.config.ts 中

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/your-repository-name/',
})

它对我有用

找不到页面 - React/vite 应用程序未在 github 页面上正确路由

问题描述投票：0回答：3

3个回答

最新问题

找不到页面 - React/vite 应用程序未在 github 页面上正确路由

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3