React Router 在 Github Pages 上无法正常工作。

Question

我的以前的网站只有在点击主页选项卡时才显示主页，然后如果你点击我的导航栏品牌，它会显示404错误。这个网站在使用create-react-app和npm start时是正常工作的，但在这里和构建版本上都不工作。我不知道应用程序出了什么问题，也许是路由设置出错了，我不知道。我已经链接了App和Index页面，其中我有路由设置。如果你需要更多信息，就请向我询问。

谢谢。

Index

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import './styles/index.css';

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

App

import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Home from "./routes/Home";
import Project from "./routes/Project";

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/project" element={<Project />}></Route>
        <Route path="/contact" element={<Contact />}></Route>
      </Routes>
    </>
  );
};

export default App;

- Amodh

Answer 1

1. 如果部署到GitHub，请确保在 package.json 中有一个 "homepage" 条目，以指定它在 GitHub 上的托管位置。

   示例:

   "homepage": "https://github.com/amodhakal/portfolio",
   

2. 切换到 HashRouter，因为 GitHub Pages 不支持 BrowserRouter 使用的技术。

   index

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { HashRouter } from 'react-router-dom';
   import App from './App';
   import './styles/index.css';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <HashRouter>
         <App />
       </HashRouter>
     </React.StrictMode>
   );
   

   react-router@6.4+ 数据路由

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import {
     createHashRouter,
     RouterProvider
   } from 'react-router-dom';
   import App from './App';
   import './styles/index.css';
   
   const router = createHashRouter([
     {
       path: "/*",
       element: <App />,
     }
   ]);
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <RouterProvider router={router} />
     </React.StrictMode>
   );
   

更多细节请参考 create-react-app 文档，了解部署到 GitHub Pages和客户端路由的注意事项。

- Drew Reese

---

谢谢，我已经添加了哈希路由器，并对主页进行了更改，我之前的主页是"homepage": "https://amodhakal.github.io/portfolio"。我已经更改了它并且它正在工作，谢谢！ - Amodh

"homepage": "./" 更加通用。 - Konrad

@Konrad，我不否认“.”和“./”更具普适性，但这个答案是基于在Github Pages上配置并运行React应用程序的建议。 - Drew Reese

Answer 2

我在使用ReactJs时遇到了类似的路由问题，当我使用`gh-pages`时。

我的问题是：在我的本地系统上，路由正常工作，但是当我使用`gh-pages`部署我的Web应用程序时，我无法直接进入子页面。

例如：`ayushjaink8.github.io/cfhelper`可以正常工作，并且我可以从Web应用程序中访问其他页面。但是，当我在URL中输入`ayushjaink8.github.io/cfhelper/dashboard`时，它显示GitHub的404错误页面。

解决方案：我通过使用``并在package.json中添加主页标签`homepage: "//#"`来解决了上述问题。

请注意，`gh-pages`也遵循其URL路由中的`#`规则。因此，如果您编写`ayushjaink8.github.io/cfhelper/#/`，它不会显示任何404错误页面。

我的代码库中其他的部分都保持不变。我没有使用 useHistory()、<BrowserRouter /> 或者其他任何函数。只使用 <HashRouter/> 大部分时间都能正常工作。

你的主页变成了 /<repo-name>/# 而不是 /<repo-name>。这是当你使用 <HashRouter/> 时唯一改变的事情。

例如，之前主页的URL是： https://ayushjaink8.github.io/cfhelper/ 使用 <HashRouter/> 后，URL 变成了： https://ayushjaink8.github.io/cfhelper/#

这也适用于路由。

下面是我的示例代码：

import { Routes, Route, HashRouter } from "react-router-dom";

<HashRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/auth/login" element={<Login />} />
        <Route path="/auth/signup" element={<Signup />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/contests/create" element={<CreateContest />} />
        <Route exact path="/contests/join" element={<JoinContest />} />
        <Route path="/contests/live" element={<LiveContest />} />
        <Route path="/practice" element={ <Practice /> } />
        <Route path="/analyze" element={ <Analyze /> } />
        <Route path="/verify" element={<VerifyEmail />} />
        <Route path="/profile/edit" element={<EditProfile />} />
      </Routes>
      <Footer />
</HashRouter>

Package.json 示例代码：

{
  "name": "cfhelper",
  "homepage": "/<your-github-repo-name>/#",
  "version": "1.0.0",
  "private": true,
}

- Ayush Jain

Answer 3

如果你正在使用HashRouter，那么你的锚点应该像以下格式：

<a href="#/endpoint"></a>

替代

<a href="/endpoint"></a>

这里是HashRouter的一个示例：

<HashRouter>
    <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/endpoint" element={<MyComponent />} />
        <Route path="*" element={<NotFoundPage />} />
    </Routes>
</HashRouter>

在花费了许多时间后，我意识到了这一点。希望这能帮助到某些人。

- Blackwater

---

这对我来说完美地起作用了。非常感谢！ - undefined

Answer 4

我的意见。

1. 在package.json中添加homepage，例如：

"homepage": "https://volodalexey.github.io/test_swapi_ant",

在您的应用程序中添加不同类型的路由器。例如：src/routes/router.tsx：

import React from 'react'
import {
  createHashRouter,
  createBrowserRouter,
  createRoutesFromElements,
  Route
} from 'react-router-dom'
import { HomeLayout } from '../layouts/HomeLayout'

const routes = createRoutesFromElements(
  <Route>
    <Route index element={<HomeLayout />}
  </Route>
)

export const router = process.env.HASH_ROUTER === 'true' ? createHashRouter(routes) : createBrowserRouter(routes)

在编程中使用这个路由器，例如在src/App.tsx中：

import React, { type ReactElement } from 'react'
import { RouterProvider } from 'react-router-dom'
import { router } from './routes/router'

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

export default App

3. 使用不同的HASH_ROUTER值与webpack一起使用。例如：webpack.config.js：

const { DefinePlugin } = require('webpack')

module.exports = {
  ...
  plugins: [
    new DefinePlugin({
      'process.env.HASH_ROUTER': JSON.stringify(process.env.HASH_ROUTER || 'false')
    })
  ]
  ...
}

4. 准备不同的构建脚本。例如，为常规使用（本地或部署到自己的服务器）准备 history-router，为 GitHub 页面准备 hash-router。例如，在 package.json 中：

  "scripts": {
    "build": "webpack",
    "build-github": "HASH_ROUTER=true webpack",
    "serve": "webpack serve"
  },

构建 GitHub Pages，运行命令 npm run build-github 并将代码推送到 gh-pages 分支（例如只有我的情况下的 dist 文件夹），使用命令 git subtree push --prefix dist origin gh-pages。

请参见我的存储库示例 https://github.com/volodalexey/test_swapi_ant。

- Alexey Volodko

Answer 5

我在使用ReactJS和gh-pages时遇到了这个问题。

我的问题：在我的本地系统上，路由运行正常，但是当我将我的Web应用部署到gh-pages时，它就无法工作。

就像其他答案一样，首先要确保package.json中有一个"homepage"条目，指明你在GitHub Pages上托管的位置。

示例：

 "homepage": "https://{username}.github.io/{repository-name}/",

将BrowserRouter切换为HashRouter。

index.js

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
    import { HashRouter } from 'react-router-dom';

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <HashRouter>
          <App />
       </HashRouter>
      </React.StrictMode>
    );

我是这样使用锚点元素的：

<a href="/">Home</a>
<a href="/about">About</a>

在我的本地主机上运行正常，但在我的GitHub页面上出现了404错误：页面未找到，我找到了两个解决这个问题的方法。

第一个解决方案：将锚元素的href属性更改为您在GitHub页面上托管的位置。

例如：

<a href="https://{username}.github.io/{repository-name}/">Home</a>
<a href="https://{username}.github.io/{repository-name}/about">About</a>

这对我来说有效。但现在你将无法在本地主机上测试它。然而，如果你想坚持使用锚点元素或链接元素，这个解决方案是可行的。

第二个解决方案：这是我找到的最好的方法。将锚点元素或链接元素更改为按钮，并添加一个onClick事件来使用useNavigate切换页面。

App.js

import Home from './pages/Home';
import About from './pages/About';
import { Routes, Route, useNavigate } from 'react-router-dom';

function App() {
const navigate = useNavigate();

return 
<>
   <button onClick={() => navigate('/')}>Home</button>
   <button onClick={() => navigate('/about')}>About</button>
   <Routes>
     <Route path="/" element={ <Home/> } />
     <Route path="/about" element={ <About/> } />
   </Routes>
</>
 }

export default App;

希望这能有所帮助。

- Gustavo Parra

Answer 6

// 将basename添加到您的BrowserRouter组件中

<BrowserRouter basename='/reponame'>
  <App/>
<BrowserRouter/>

- Jagadish Shrestha

Answer 7

搞定了。这是因为URL结构的原因。

https://umair-mirza.github.io/safetyapp/

这意味着您需要为/safetyapp定义一个路由。

就像这样：

<Route path='/safetyapp' element={<Home />} />

- Umair