React HashRouter--在导航的 "主页 "上获取两次项目名称。

Question

我把我的应用程序部署到github页面，一切都很好，除了这个网址问题。当页面最初重新加载时，我得到了''。https:/username.github.ioportfolio#。'，但当我开始在项目中导航并点击导航栏的 "主页 "时，我得到的是 https:/username.github.ioportfolio#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 将把该伪路径段附加到该部分 之后 的哈希值。你不需要使用 basename 与 HashRouter (因为一切都已经相对于基本路径而言)。