React HashRouter - получение имени проекта дважды на "домашней странице" навигации

Question

Я развернул свое приложение на страницах github, и все работает нормально, кроме этой проблемы с URL-адресом, которую я получаю. Когда страница сначала перезагружается, я получаю «https://username.github.io/portfolio/# / », но когда я начинаю перемещаться по проекту и нажимаю «домой» панели навигации, я получаю https://username.github.io/portfolio/# / портфолио / и я хочу выяснить, как «дом» панели навигации не повторяет портфолио дважды в ссылке.

Мой App выглядит так:

import React from 'react';
import {
 useLocation,
  Switch,
  Route
} from "react-router-dom";
import GlobalStyles from './GlobalStyles';
import Home from './pages/Home';
import Contact from './pages/Contact';
import About from './pages/About';
import Navbar from './components/Navbar/Navbar';
import {useTransition, animated} from 'react-spring'
import { withRouter } from "react-router";
import Hamburger from './components/HamburgerMenu/HamburgerMenu';

const App = () => {

  const location = useLocation()

  const mq = window.matchMedia( "(min-width: 600px)" )

  const transitions = useTransition(location, location => location.pathname, {
    from: {transform: mq.matches ? "translateX(100%)" : "translateX(0)", position:'absolute', width: '100vw', opacity: 0},
    enter: {opacity: 1, width: '100vw', transform: "translateX(0)"},
    leave: {opacity: 0, transform: mq.matches ? "translateX(-50%)" : "translateX(0)"}
  })

    return (
        <>
        <GlobalStyles />
        <Hamburger />
        <Navbar />
        {transitions.map(({ item, props, key }) => (
          <animated.div key={key} style={props}>
             <Switch location={item}>
        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/contact' component={Contact} />
        </Switch>
          </animated.div>
        ))}
         </>
    )
  }

export default withRouter(App);

и index:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {
 HashRouter
} from "react-router-dom";

ReactDOM.render(
  <HashRouter basename={process.env.PUBLIC_URL}>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

Панель навигации:

import React from 'react';
import { NavItem, ItemsContainer, StyledLink } from './NavItemsContainerStyles';

const NavItemsContainer = () => (
    <ItemsContainer>
        <StyledLink exact to="/">
            <NavItem>
                HOME
           </NavItem>
        </StyledLink>

        <StyledLink to="/about">
            <NavItem>
                ABOUT
    </NavItem>
        </StyledLink>

        <StyledLink to="/contact">
            <NavItem>
                CONTACT
    </NavItem>
        </StyledLink>

    </ItemsContainer>
)

export default NavItemsContainer

Answer 1

Установка basename на HashRouter добавит этот псевдопутевой сегмент к части после ha sh. Вам не нужно использовать basename с HashRouter (потому что все уже относительно базового пути).