HashRouter No routes matched location

Question

I am currently trying to implement a hashrouter and Im getting the error: No routes matched location "register" going to the url localhost:3000/#register

My index.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);

My App.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>
  );
}

I also tried this:

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

          </Routes>
      </>
  );

with a hash instead of a '/'. But Im getting the same result.

Dont mind the web3 stuff, that all works.

Is HashRouter still a thing in v6 of react-router-dom?

Answer 1

The links in NavDom should be react-router-dom links and they should link to pages the app is rendering. The URL will end up something like localhost:3000/#/register.

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

...

<NavDom/>
<Routes>
  <Route path="/register" element={<RegisterFormDom />} />
  <Route path="/" element={<HomeDom />} />
</Routes>