基本路由导航

1. 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>
   );

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