假设有一个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'}...}

这是一个简单的定义路由,导航到某个页面,在导航到的页面接收参数的过程.