Как использовать историю тегов якорного идентификатора вact.js

Question

Я нашел какой-то ответ, что мы можем использовать hash для этой проблемы, но я не могу использовать его, так как из-за этого моя веб-ссылка не выглядит хорошо. Я хочу ориентироваться на пользователя, когда он нажимал на какой-то раздел на той же странице в моей сети, например, когда вы нажимали about, тогда ссылка будет выглядеть как base_url/home#about.

Обычно я могу использовать ее в обычном режиме. HTML, например, как эта простая строка <a href="#about">about</a>, но я совершенно не понимаю, как использовать его внутри DOM или, по крайней мере, в ReactionJS. Я уже пытаюсь решить ее около 10 дней, но все равно не повезло.

Это статья, которую я прочитал, но я думаю, что она слишком старая:

use-anchors-with-реагировать-router

как создать анкер-тег-в-реакции-маршрутизаторе

Может кто-нибудь помочь решить эту проблему? Я очень запутался в этой проблеме.

просто для справки это мой пакет. Json:

{
  "name": "base",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "history": "^4.9.0",
    "mdbreact": "^4.18.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-router-hash-link": "^1.2.2",
    "react-scripts": "3.0.1",
    "react-scrollable-anchor": "^0.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

РЕДАКТИРОВАТЬ 1

ЭтоНапример, когда я использую hashlink

import { HashLink as Links } from 'react-router-hash-link';

<Links to="#about">test</Links>

, это компонент моей домашней страницы:

import React, { Component } from 'react';

// Component
import './homepage.css';
import Header from '../header/header';
import Footer from '../footer/footer';
import Carousel from './carousel/carousel';
import Banner from './banner/banner'
import Pesanan from './pesanan/pesanan';
import Value from './value/value';
import About from './about/about';
import Order from './order/order';
import Klien from './klien/klien';
import Portfolio from './portfolio/portfolio';

class Homepage extends Component {
  render(){
    return (
      <div className="body">
        <Header />
        <Carousel id="promotion-banner" />
        <Banner />          
        <Pesanan id="status" />
        <Value id="value" />
        <About id="about" />
        <Order id="order" />
        <Klien id="client" />
        <Portfolio id="portfolio" />
        <Footer id="contact" />
      </div>
    );  
  }
}

export default Homepage;

Это мой app.js:

import React from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';

// Components
import './App.css';
import Homepage from './Components/homepage/homepage';

function App() {
  return (
    <div>
      <Router history={history}>
        <Switch>
          <Route exact path="/" component={Homepage} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;