React应用程序HashRouter在localhost以及Github用户页面上均不起作用 [英] React app HashRouter not working on localhost as well as Github User page

问题描述

我正在React中创建一个博客，以部署在 GitHub Pages 上.

I'm creating a blog in React to be deployed on GitHub Pages.

问题

1. 创建了我的React应用并添加了 BrowserRouter 进行导航，所有操作在localhost上均正常，并且该应用已成功部署在 GitHub Pages 上.
2. 即使可以在 GitHub Pages 上访问主页，如果我单击任何链接，也会出现 404错误.问题是 BrowserRouter 不适用于GitHub页面.
3. 进行了一些研究后，由于 BrowserRouter 在GitHub页面上不起作用，我在我的react应用程序中添加了 HashRouter .
4. 再次使用 HashRouter 成功加载主页，但是如果我单击应该将我从 home转到博客部分的链接，则预期的行为应该是这样的，但网址更改为localhost:3000/blog#/之类的内容，而且我仍在首页上.
5. 问题4对于本地主机和Github Pages都是正确的

6. 但是，如果我手动输入URL localhost:3000/#/blog，它可以很好地工作并按预期加载 Blog 组件. GitHub Pages 上的类似行为.

1. Created my React app and added BrowserRouter for navigation, everything was working fine on localhost and the app successfully deployed on the GitHub Pages.
2. Even though Home page was accessible on GitHub Pages, if I click on any link there was 404 Error. The problem was BrowserRouter does not work with GitHub pages.
3. After some research I added HashRouter in my react app as BrowserRouter was not working on GitHub pages.
4. With HashRouter again Homepage is loaded successfully but if I click on link that should take me from home to blog section the expected behaviour should have been something like this localhost:3000/#/blog but the url changes to something like localhost:3000/blog#/ and I'm still on homepage.
5. Problem 4 is true for both localhost as well as Github Pages

6. But if I manually enter the url localhost:3000/#/blog it works perfectly fine and loads the Blog component as expected. Similar behaviour on the GitHub Pages.

Home.js

import React from 'react';
import { Component } from 'react';
import HODL from './HODL';
import Header from './Header';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import Jargons from './Jargons';

class Home extends Component {

  render () {

    return (
      <Router basename={process.env.PUBLIC_URL + "/"}>
        <Header />
        <Switch>
          <Route path="/" exact component={HODL} />
          <Route path="/blog" component={Blog} />
          <Route path="/tutorials/javascript" component={JavaScript} />
          <Route path="/tutorials/solidity" component={Solidity} />
          <Route path="/jargons" component={Jargons} />
        </Switch>
      </Router>
    );
  }
}

export default Home;

无论是否使用basename={process.env.PUBLIC_URL + "/"}

Package.json

{
  "name": "block-by-block.github.io",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://block-by-block.github.io",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "bootstrap": "^4.4.1",
    "gh-pages": "^2.1.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "react-bootstrap": "^1.0.0",
    "react-markdown": "^4.3.1",
    "react-router-dom": "^5.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

PS:完整的源代码可在 Github链接，并且该应用已部署在此处反应应用

PS : Complete source code is available at Github link and the app is deployed here React App

推荐答案

所以我发现问题出在您的Header组件中. 您正在使用与react-router-dom不兼容的引导程序.有关更多信息，请在google上查找.

So I found the issue lies in your Header component. You are using bootstrap which is not compatible with react-router-dom. For more information, kindly look it up on google.

这是您应该更改的内容:

Here is what you should change:

import { Link } from "react-router-dom";

<Nav.Link as={Link} to="/jargons">
   Jargons that works!
</Nav.Link>

这篇关于React应用程序HashRouter在localhost以及Github用户页面上均不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！