React Router V6使用

安装 React Router #

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

开启 React Router #

在index.js中

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

入口处添加BrowserRouter

root.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);

完整示例：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);
reportWebVitals();

使用 React Router #

App.js示例：

// App.js

import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/Home";
import AddPage from "./pages/Add";
import NotFount from "./pages/NotFount";

function App() {
  return (
    <Routes>
      {/* 页面默认导航到 Home 组件(页面上显示 Home Compontent) */}
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AddPage />} />
      {/* 当没有其他路由与 URL 匹配时，匹配 path='*'的路由 */}
      <Route path="*" element={<NotFount />} />
    </Routes>
  );
}

export default App;

传递参数 #

路由处：

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

页面逻辑处：

let { id } = useParams();