假設有一個vite創建的react項目,先npm install react-router-dom.

在app中:

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Login from "./comm/Login";
import Home from "./comm/Home";
import TotalManager from "./totalManager/TotalManager";
import Company from "./totalManager/Company";const router = createBrowserRouter([{path: "/",element: <Login />,},{path: "/home",element: <Home />,children: [{path: "/home/totalManager",element: <TotalManager />,children: [{ path: "/home/totalManager/company", element: <Company /> },//這里可以繼續增加...//{path: "/home/totalManager/你的路由", element: <你的組件 />,//},],},],},//這里可以繼續增加...//{//  path: "/...",//  element: <... />,//},
]);function App() {return <RouterProvider router={router} />;
}export default App;

那么在npm run dev后,將率先顯示<Login />組件

在<Login />組件中,

import { useNavigate,Link?} from "react-router-dom";function Login() {const navigate = useNavigate();return (<div><button?onClick={() => navigate("/home",{state:{id:'1111',action:'hello'}})}>登錄</button><Link? to="/home" >主頁</Link><div>)}

在<Home />中

import { useLocation } from "react-router-dom";function Home() {const location = useLocation();console.log(location.state);  //將顯示 {id:"1111",action:'hello'}...}

這是一個簡單的定義路由,導航到某個頁面,在導航到的頁面接收參數的過程.