react教程，react页面如何使用路由？hash路由用什么替代？

npm install create-react-app -g

create-react-app test

cd test
npm start

npm i react-router-dom --save

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router,HashRouter} from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

import { BrowserRouter as Router,HashRouter} from "react-router-dom";

<Router></Router>

import logo from './logo.svg';
import './App.css';
import { Routes, Route, Link, useParams} from "react-router-dom";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <nav>
          <Link to="/">Index</Link>
          <Link to="/about">about</Link>
        </nav>
        <img src={logo} className="App-logo" alt="logo" />
        <Routes>
          <Route index element={<Index />} />
          <Route path="about" element={<About />} />
        </Routes>
      </header>
    </div>
  );
}

function Index() {
  return (
    <>
      <main>
        <h2>首页</h2>
      </main>
    </>
  );
}

function About() {
  return (
    <>
      <main>
        <h2>About页面</h2>
      </main>
    </>
  );
}
export default App;

import { BrowserRouter,HashRouter as Router} from "react-router-dom";

import { BrowserRouter as Router,HashRouter} from "react-router-dom";