安装 React Router

1npm install react-router-dom@6 --save

开启 React Router

在index.js中

导入import { BrowserRouter } from 'react-router-dom';

入口处添加BrowserRouter

1root.render(
2  <BrowserRouter>
3    <React.StrictMode>
4      <App />
5    </React.StrictMode>
6  </BrowserRouter>
7);

完整示例：

 1import React from "react";
 2import ReactDOM from "react-dom/client";
 3import "./index.css";
 4import App from "./App";
 5import reportWebVitals from "./reportWebVitals";
 6import { BrowserRouter } from "react-router-dom";
 7
 8const root = ReactDOM.createRoot(document.getElementById("root"));
 9root.render(
10  <BrowserRouter>
11    <React.StrictMode>
12      <App />
13    </React.StrictMode>
14  </BrowserRouter>
15);
16reportWebVitals();

使用 React Router

App.js示例：

 1// App.js
 2
 3import { Route, Routes } from "react-router-dom";
 4import HomePage from "./pages/Home";
 5import AddPage from "./pages/Add";
 6import NotFount from "./pages/NotFount";
 7
 8function App() {
 9  return (
10    <Routes>
11      {/* 页面默认导航到 Home 组件(页面上显示 Home Compontent) */}
12      <Route path="/" element={<HomePage />} />
13      <Route path="/about" element={<AddPage />} />
14      {/* 当没有其他路由与 URL 匹配时，匹配 path='*'的路由 */}
15      <Route path="*" element={<NotFount />} />
16    </Routes>
17  );
18}
19
20export default App;

传递参数

路由处：

1<Route path="/user/:id" element={<UserDetail />} />

页面逻辑处：

1let { id } = useParams();