React 应用程序 HashRouter 无法在本地主机和 Github 用户页面上运行

Question

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

问题

1. 创建了我的 React 应用程序并添加了BrowserRouter用于导航，一切都在 localhost 上正常工作，并且该应用程序成功部署在GitHub Pages上。
2. 尽管可以在GitHub Pages上访问主页，但如果我单击任何链接，都会出现404 错误。问题是BrowserRouter不适用于 GitHub 页面。
3. 经过一番研究后，我在我的 React 应用程序中添加了HashRouter ，因为BrowserRouter无法在 GitHub 页面上运行。
4. 再次使用HashRouter主页已成功加载，但如果我单击应该从主页转到博客部分的链接，预期的行为应该是这样的 localhost:3000/#/blog，但 url 会更改为类似的内容localhost:3000/blog#/，并且我仍然在主页上。
5. 问题 4 对于 localhost 和 Github Pages 都适用

6. 但如果我手动输入 url，localhost:3000/#/blog它工作得非常好，并按预期加载博客组件。GitHub Pages上有类似的行为。

   主页.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 + "/"}

包.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 链接上找到，应用程序部署在此处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>