NavBar发布到github页面时返回404

Question

所以我最近将我的一个项目发布到了gh-pages，而我碰巧使用HashRouter进行了路由。但是我的NavBar（来自reactstrap）在托管版本上无法正确重定向。

我尝试将process.env.PUBLIC_URL附加到路由/ href，但还是没有运气。任何帮助将不胜感激。

我的进口货

import React, { Component } from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import { Switch } from "react-router";
import { LinkContainer } from "react-router-bootstrap";
import { CircleArrow as ScrollUpButton } from "react-scroll-up-button";
import {
  DropdownItem,
  NavLink,
  Navbar,
  NavbarBrand,
  NavItem,
  Nav,
  NavbarToggler,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu
} from "reactstrap";

import Pre from "./Line/component/pre.jsx";
import WW2 from "./Line/component/ww2.jsx";
import Post from "./Line/component/post.jsx";
import Present from "./Line/component/present.jsx";
import Archive from "./Line/component/archive.jsx";
import "firebase/database";
import "./App.css";

我的路线，基本地址为https://dw-ll.github.io/berelson-project/#/

 <Router basename={process.env.PUBLIC_URL}>
        <Switch>
          <Route
            path="/Berelson-Project"
            exact
            render={() => {
              return <Line />;
            }}
          />
          <Route
            path={`${process.env.PUBLIC_URL}/pre`}
            exact
            render={() => {
              return <Pre />;
            }}
          />
          <Route
            path={`${process.env.PUBLIC_URL}/ww2/`}
            exact
            render={() => {
              return <WW2 />;
            }}
          />
          <Route
            path={`${process.env.PUBLIC_URL}/post/`}
            exact
            render={() => {
              return <Post />;
            }}
          />
          <Route
            path={`${process.env.PUBLIC_URL}/present/`}
            exact
            render={() => {
              return <Present />;
            }}
          />
          <Route
            path={`${process.env.PUBLIC_URL}/archive/`}
            exact
            render={() => {
              return <Archive />;
            }}
          />

我的导航栏，“关于”和“存档”的路由都重定向到404。

   <Navbar
              className="navbar-header"
              theme="dark"
              light
              expand="md"
            >
              <NavbarBrand href="/berelson-project/">
                {" The Berelson Project"}
              </NavbarBrand>
              <NavbarToggler onClick={this.toggle} />

              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/about">About</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href={`${process.env.PUBLIC_URL}/archive/`}>
                    Archive
                  </NavLink>
                </NavItem>