React HashRouter - 在导航 'home' 上两次获取项目名称

Question

我将我的应用程序部署到 github 个页面并且一切正常，除了我遇到的这个 url 问题。当页面最初重新加载时，我得到“https://username.github.io/portfolio/#/' but when I start to navigate through the project and click the nav bar's 'home', I get https://username.github.io/portfolio/#/portfolio/，我想找出一种方法，使导航栏的 'home' 不会在 link 中重复投资组合两次。

我的 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

在 HashRouter 上设置 basename 会将伪路径段附加到散列之后的 部分。您不需要将 basename 与 HashRouter 一起使用（因为一切都已经相对于基本路径）。

React HashRouter - 在导航 'home' 上两次获取项目名称

React HashRouter - getting project name twice on navigation's 'home'

javascript

router

reactjs

react-router

react-router-dom