React приложение HashRouter не работает на локальном хосте, а также на странице пользователя Github

Question

Я создаю блог в React для развертывания на GitHub Pages .

Проблема

1. Создано мое приложение React и добавил BrowserRouter для навигации, на localhost все работало нормально, и приложение успешно развернуто на GitHub Pages .
2. Даже если домашняя страница была доступна на Страницы GitHub , если я нажимаю на любую ссылку, появляется 404 Ошибка . Проблема была BrowserRouter не работает со страницами GitHub.
3. После некоторых исследований я добавил HashRouter в свое приложение реакции, так как BrowserRouter не работал на страницах GitHub.
4. С HashRouter снова Домашняя страница успешно загружена, но если я нажму на ссылку, которая приведет меня из раздела home to blog , ожидаемое поведение должно было быть что-то вроде localhost:3000/#/blog, но URL меняется на что-то вроде localhost:3000/blog#/, и я все еще на главной странице.
5. Проблема 4 верна как для localhost, так и для Github Pages

6. Но если я вручную введу URL localhost:3000/#/blog, он будет отлично работать и загрузит компонент Blog , как и ожидалось. Аналогичное поведение на 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 + "/"}

Пакет. 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. Вы используете bootstrap, который не совместим с response-router-dom. Для получения дополнительной информации, пожалуйста, посмотрите на Google.

Вот что вы должны изменить:

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

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

Answer 2

Попробуйте это:

<HashRouter basename="/xyz"/>
 <Router component={}>
</HashRouter>