HashRouter 没有路由匹配位置

Question

我目前正在尝试实现一个 hashrouter，但我收到错误消息：没有路由匹配位置“注册”去 url localhost:3000/#register

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

我的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>
  );
}

我也试过这个：

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

          </Routes>
      </>
  );

使用散列而不是“/”。但是我得到了相同的结果。

不要介意 web3 的东西，那都行。

HashRouter 还在 react-router-dom 的 v6 中吗？

Answer 1

NavDom中的link应该是react-router-domlink和他们应该 link 到应用程序正在呈现的页面。 URL 最终会变成 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>

HashRouter 没有路由匹配位置

HashRouter No routes matched location

reactjs

react-router

react-dom

react-router-dom