Typescript React HashRouter，单击导航栏时页面重新加载出现问题

当我try 更改页面并点击导航栏时，它会变成url，但在我手动点击重新加载页面之前，它不会改变.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import HomePage from './components/HomePage/HomePage';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.js';
import 'popper.js/dist/popper.js';
import 'bootstrap/dist/js/bootstrap.min.js';
import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
import { MainMenu, MainMenuItem } from './components/MainMenu/MainMenu';
import { HashRouter, Routes, Route } from 'react-router-dom';
import { ContactPage } from './components/ContactPage/ContactPage';
import { UserLoginPage } from './components/UserLoginPage/UserLoginPage';

const menuItems = [
  new MainMenuItem("Home", "/"),
  new MainMenuItem("Contact", "/contact"),
  new MainMenuItem("Log in", "/user/login"),
];

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <MainMenu items={menuItems} />
    <HashRouter>
      <Routes>
        <Route index path='/' element={<HomePage />} />
        <Route path="/contact" element={<ContactPage />} />
        <Route path="/user/login" element={<UserLoginPage />} />
     </Routes>
    </HashRouter>
  </React.StrictMode>
);

reportWebVitals();

这是另一个需要对齐我的导航栏的类.

import React from 'react';
import { Nav, Container } from 'react-bootstrap';
import { HashRouter , Link } from 'react-router-dom';

export class MainMenuItem {
  text: string = '';
  link: string = '#';

  constructor(text: string, link: string) {
    this.text = text;
    this.link = link;
  }
}

interface MainMenuProperties {
  items: MainMenuItem[];
}

interface MainMenuState {
  items: MainMenuItem[];
}

export class MainMenu extends React.Component<MainMenuProperties>{
  state: MainMenuState;

  constructor(props: Readonly<MainMenuProperties>) {  
    super(props);
    this.state = {
      items: props.items,
    };
  }

  public setItems(items: MainMenuItem[]) {
    this.setState({
      items: items,
    });
  }

  render() {
    return (
      <Container>
        {this.state.items.map(this.makeNewLink)}
    );
  }

  private makeNewLink(item: MainMenuItem, index: number) {
    return (
      <Link key={index} to={item.link} className='nav-link'>
        {item.text}
      </Link>
    );
  }
}