NavBar возвращает 404 при публикации на страницах GitHub - PullRequest
Новая
       27

NavBar возвращает 404 при публикации на страницах GitHub

0 голосов
/ 07 июля 2019

Итак, я недавно опубликовал свой проект на gh-pages, и мне пришлось отключить маршрутизацию, используя HashRouter. Но мой NavBar (отactstrap) не перенаправляет должным образом на размещенной версии.

Я пробовал добавлять файл process.env.PUBLIC_URL в route / 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 />;
            }}
          />

Моя навигационная панель, оба маршрута для About и 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>
...