React Router 无法与 Github Pages 一起使用

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

我以前的网站仅在单击主页选项卡时显示主页，然后如果您单击我的导航栏品牌，它会显示 404。该网站在带有 npm start 的 create-react-app 上运行，但在这里不起作用，也不在构建上。我不知道该应用程序出了什么问题，也许路由器设置搞砸了，我不知道。我已链接了我进行路由器设置的应用程序和索引页面。如果您需要更多信息，请向我询问更多信息。

谢谢你

索引

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>
);

应用程序

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;
reactjs react-router-dom github-pages
7个回答
41
投票

  1. 如果部署到 GitHub，请确保 package.json 中有一个 

    "homepage"
    条目，表示您在 Github 中托管它的位置。

    示例：

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

  2. 切换到 

    HashRouter
    ，因为 GitHub 页面不支持 
    BrowserRouter
    使用的技术。

    索引

    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>
);


    [email protected]+
    数据路由器

    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和有关客户端路由的注释。

10
投票

当我使用

gh-pages
时，我在ReactJs中遇到了类似的路由问题。

我的问题： 路由在我的本地系统上工作正常，但是当我使用 

gh-pages
部署我的网络应用程序时，我无法直接转到子页面。

示例：

ayushjaink8.github.io/cfhelper
正在工作，我可以从网络应用程序内转到其他页面。但是当我在 URL 中输入 
ayushjaink8.github.io/cfhelper/dashboard
时，它会显示 github 404 错误页面。

解决方案：我通过使用

<HashRouter/>
并在package.json中添加主页标签（如
homepage: "/<repository-name>/#"
）解决了上述问题。

请注意，

gh-pages
在其 URL 路由中也遵循 
#
规则。所以如果你写
ayushjaink8.github.io/cfhelper/#/<any-route-of-your-app>
，它不会显示任何404错误页面。

我的代码库中的其他所有内容都保持不变。我没有使用

useHistory()
、
<BrowserRouter />
或任何其他功能。大多数情况下仅使用 
<HashRouter/>
即可。

您的主页变为 

/<repo-name>/#
而不是 
/<repo-name>
。这是当您使用 
<HashRouter/>
时唯一会改变的事情。

例如之前的主页是： 

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,
}

1
投票

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

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

就像其他答案一样，首先：

  1. 确保 package.json 中有一个“主页”条目，用于在 GitHub Pages 上托管它。

示例：

 "homepage": "https://{username}.github.io/{repository-name}/",
  1. 将 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 更改页面。

应用程序.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;

希望这有帮助。

0
投票

// 将基本名称添加到您的 browserRouter 组件

<BrowserRouter basename='/reponame'>
  <App/>
<BrowserRouter/>
0
投票

我的2美分。

  1. 在
    homepage
    中添加
    package.json
    ，例如：
"homepage": "https://volodalexey.github.io/test_swapi_ant",
  1. 在您的应用程序中添加不同的路由器类型。例如。 
    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
  1. 与 webpack 一起使用不同的 
    HASH_ROUTER
    值。例如。 
    webpack.config.js
    ：
const { DefinePlugin } = require('webpack')

module.exports = {
  ...
  plugins: [
    new DefinePlugin({
      'process.env.HASH_ROUTER': JSON.stringify(process.env.HASH_ROUTER || 'false')
    })
  ]
  ...
}
  1. 准备不同的构建脚本。例如。用于常规使用的历史路由器（本地或部署到自己的服务器）和用于 github 页面的哈希路由器。例如在
    package.json
    ：
  "scripts": {
    "build": "webpack",
    "build-github": "HASH_ROUTER=true webpack",
    "serve": "webpack serve"
  },
  1. 构建 github 页面 
    npm run build-github
    并推送到 
    gh-pages
    分支（例如，在我的情况下只有 
    dist
    文件夹）
    git subtree push --prefix dist origin gh-pages
    。

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

0
投票

如果您使用 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>

我花了这么多时间才意识到这一点。希望这会对某人有所帮助。

-3
投票

想通了。这是因为 url 结构。

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

意味着你必须为 /safetyapp 定义一条路线

像这样：

<Route path='/safetyapp' element={<Home />} />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.