Reactjs HashRouter 没有路由匹配的位置

我目前正在try 实现一个hashrouter，但我得到了一个错误:没有路由匹配的位置"register"进入url localhost:3000/#register

我的索引.js:

      import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter} from 'react-router-dom'
// import './bootstrap/dist/css/bootstrap.min.css';
// import './bootstrap/dist/js/bootstrap.min';
import reportWebVitals from './reportWebVitals';
import App from "./App";

ReactDOM.render(

    <HashRouter>
          <App />
  </HashRouter>
            ,
  document.getElementById('root')
);


reportWebVitals(console.log);

我的apply.js:

import React, {Component, useEffect, useState} from 'react';
import {Routes, Route} from 'react-router'
import * as $ from 'jquery';
import Web3 from 'web3';
import 'bootstrap/dist/css/bootstrap.min.css';
// import './sketchy.min.css';

import { Navbar, Nav, Container, NavDropdown, Form,FormControl, Button, Row, Col, PageHeader } from 'react-bootstrap';

    function App() {
 
  return(
      <>
        <NavDom/>
          <Routes>
              <Route path='/register' element={<RegisterFormDom/>}/>
              <Route path='/' element={<HomeDom/>}/>

          </Routes>
      </>
  );

}

const HomeDom = ()=>{
  return(
     <Row>
        <Col>


        </Col>
      </Row>
  );
}
const NavDom = ()=>{//
  return(
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <Container>
              <Navbar.Brand href="/">Bulls Marketplace</Navbar.Brand>
              <Navbar.Toggle aria-controls="responsive-navbar-nav" />
              <Navbar.Collapse id="responsive-navbar-nav">
                  <Nav className="me-auto">
                      <Nav.Link href="#register">Register</Nav.Link>
                      <Nav.Link href="#wallet">Wallet</Nav.Link>
                      <Nav.Link href="#wallet">My Services</Nav.Link>
                      <Nav.Link href="/store">Store</Nav.Link>
                  </Nav>
                  <Nav>
                      <Nav.Link to="#about">About</Nav.Link>

                  </Nav>
              </Navbar.Collapse>
          </Container>
      </Navbar>
  );
}
const RegisterFormDom = ()=>{
  return(
      <Row>
        <Col>
          <h3 className="sub-header">Register Player</h3>
          <form className="form-inline" role="form">
            <div className="form-group">
              <table>
                <tr>
                  <td><label htmlFor={"username"}>Username:</label></td>
                  <td>
                    <input className={"form-control"} id={"username"} name={"username"}/>

                  </td>
                </tr>
              </table>
            </div>
            <a href={"#"} className={"btn btn-primary"}>Register</a>
          </form>
        </Col>
      </Row>
  );
}

我也试过:

     return(
      <>
        <NavDom/>
          <Routes>
              <Route path='#register' element={<RegisterFormDom/>}/>
              <Route path='/' element={<HomeDom/>}/>

          </Routes>
      </>
  );

用散列代替"/".但是我得到了同样的结果.

不要介意web3的东西，这一切都是有效的.

HashRouter还在react router dom的v6中吗？