基本路由导航

index.js 采用 BrowserRouter

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <App />
  </Router>
);

App.jsx 引入路由组件

import React from "react";
import { Link, Route, Routes } from "react-router-dom";
// 路由组件
import Home from "./pages/Home";
import About from "./pages/About";

export default function App() {
  return (
    <div>
      <h2>React Router Demo</h2>
      <div>
        <div>
          {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </div>
        <div>
          <Routes>
            {/* 注册路由 */}
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}