reactjs React路由器无法与Github Pages一起使用

njthzxwz 于 2022-11-29 发布在 React

关注(0)|答案(4)|浏览(201)

我以前的网站只显示主页时，主页选项卡被点击，然后如果你点击我的导航栏品牌，它说404。这个网站工作的一个创建-React-应用程序与npm开始，但它不工作在这里，也不对建设。我不知道是什么问题的应用程序，也许路由器设置是混乱的，我不知道。我已经链接了应用程序和索引页面，我有路由器设置。如果你需要任何更多的信息，只是问我更多的信息。
谢谢您
索引

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

来源：https://stackoverflow.com/questions/71984401/react-router-not-working-with-github-pages

4条答案

按热度按时间

fquxozlt1#

1.如果要部署到GitHub，请确保在Github中有一个"homepage"条目来表示托管位置。
示例：

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

1.切换到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>
 );

有关更多详细信息，请参阅create-react-app文档以了解如何部署到GitHub页面，以及客户端路由的注意事项。

赞(0）回复(0）举报 2022-11-29

62lalag42#

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

**我的问题：**路由在我的本地系统中运行正常，但当我将Web应用程序部署到gh-pages时，无法使用URL直接访问任何页面。

示例：ayushjaink8.github.io/cfhelper工作正常，我也可以从Web应用程序中转到其他页面，但当我直接在URL中键入ayushjaink8.github.io/cfhelper/dashboard时，它会显示github 404错误页面。*
**解决方案：**我通过使用<HashRouter/>并在package.json中添加homepage标记（如homepage: "/<repository-name>/#"）解决了上述问题。

gh-pages在其URL路由中也遵循#规则，所以如果你写ayushjaink8.github.io/cfhelper/#/<any-route-of-your-app>，它不会显示任何404错误页面。
我的代码库中其他的一切都保持不变。我没有使用任何useHistory()函数或<BrowserRouter />或任何其他东西。这个简单的黑客工程适用于所有情况。
你的主页不再是/<repo-name>，而是变成了/<repo-name>/#，仅此而已。

下面是我的示例代码：

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>

包.json示例代码：

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

赞(0）回复(0）举报 2022-11-29

xcitsw883#

//将basename添加到browserRouter组件

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

赞(0）回复(0）举报 2022-11-29

20jt8wwn4#

我知道了。是因为网址结构。
https://umair-mirza.github.io/safetyapp/
表示您必须为/safetyapp定义路由
就像这样：

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

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs React路由器无法与Github Pages一起使用

应用

4条答案

相关问题

热门标签

最新问答