reactjs - React 应用程序 HashRouter 无法在 localhost 和 Github 用户页面上运行

Question

我正在 React 中创建一个博客以部署在 GitHub 页面 .

问题

创建了我的 React 应用程序并添加了 浏览器路由器 对于导航，在本地主机上一切正常，应用程序成功部署在 上。 GitHub 页面 .

即使主页可以访问 GitHub 页面 ，如果我点击任何链接，就会出现 404 错误 .问题是 浏览器路由器 不适用于 GitHub 页面。

经过一番研究，我添加了 哈希路由器在我的 react 应用程序中为 浏览器路由器 不在 GitHub 页面上工作。

与 哈希路由器主页再次成功加载，但如果我点击链接，我应该从 博客首页 部分预期的行为应该是这样的 localhost:3000/#/blog但网址更改为类似 localhost:3000/blog#/ 的内容我还在主页上。

问题 4 对于 localhost 和 Github Pages

都是正确的

但是如果我手动输入网址 localhost:3000/#/blog它工作得很好并加载了 博客 组件如预期。 上的类似行为GitHub 页面 .

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 link 获得应用程序部署在这里 React App

Answer 1

所以我发现问题出在您的 Header 组件中。
您正在使用与 react-router-dom 不兼容的 bootstrap 。有关更多信息，请在谷歌上查找。

以下是您应该更改的内容:

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

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