use react-virtual-router demo

import { lazy, useEffect } from "react";
import "./App.css";

import {
  Router,
  Link,
  createRoutes,
  Outlet,
  useNavigate,
  useParams,
  useQuery,
} from "react-virtual-router";
// 页面组件
function Home() {
  useEffect(() => {
    console.log("Home mount");
    return () => {
      console.log("Home unmount");
    };
  }, []);
  return (
    <div>
      <h1>首页</h1>
      <Link to="/about">关于我们</Link>
      <br />
      <Link to="/admin">管理后台</Link>
      <br />
      <Link to="/admin/users/test">管理后台test</Link>
      <br />
      <Link to="/push" replace={false}>
        测试push
      </Link>
    </div>
  );
}

function About() {
  useEffect(() => {
    return () => {
      console.log("unmount");
    };
  }, []);
  return (
    <div>
      <h1>关于我们</h1>
      <Link to="/">返回首页</Link>
    </div>
  );
}
let index = 0;
// 布局组件
function AdminLayout() {
  const navigate = useNavigate();
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <nav>
        <h2>管理后台</h2>
        <ul>
          <li
            onClick={() => {
              index++;
              navigate.replace({
                path: "/admin/users/test",
                query: { name: "zzgh", index },
                params: { id: 123, index },
              });
            }}
          >
            用户管理(函数式点击)
          </li>
          <li>
            <Link
              to="/admin/users"
              query={{ name: " zzgh", index }}
              params={{ id: 123, index }}
            >
              用户管理
            </Link>
          </li>
          <li>
            <Link to="/admin/settings">系统设置</Link>
          </li>
        </ul>
      </nav>
      <div
        style={{
          display: "flex",
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Outlet name="admin" />
      </div>
    </div>
  );
}

function UserList() {
  // admin/users
  const params = useParams();
  const query = useQuery();

  console.log("用户列表页面", query, params);
  return (
    <div>
      <h3>用户列表页面</h3>
      <Link to="/">返回首页</Link>
      <Outlet name="users"></Outlet>
    </div>
  );
}
function UserDetail() {
  console.log("u用户详情页面");
  return (
    <div>
      <Link to="/">返回首页</Link>
      <h3>用户详情页面</h3>
    </div>
  );
}
function Settings() {
  console.log("系统设置页面");
  return (
    <div>
      <Link to="/">返回首页</Link>
      <h3>系统设置页面</h3>
    </div>
  );
}

function Push() {
  console.log("push页面");
  const { back, push } = useNavigate();
  return (
    <div>
      <button onClick={() => back()}>返回</button>
      <h3 onClick={() => push("/push2")}>去往push2页面</h3>
    </div>
  );
}
function Push2() {
  console.log("push2页面");
  const { back } = useNavigate();
  return (
    <div>
      <button onClick={() => back()}>返回</button>
      <h3>我是push2页面</h3>
    </div>
  );
}
function Test() {
  const params = useParams();
  const query = useQuery();

  console.log("用户test页面", query, params);
  return (
    <div>
      <Link to="/">返回首页</Link>
      <h3>/admin/users/test</h3>
    </div>
  );
}
// 可以通过添加日志来观察执行情况
// const LazyHome = lazy(() => import("./pages/Home"));
// 数组方式配置路由
const routesConfig = createRoutes([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/push",
    element: <Push />,
  },
  {
    path: "/push2",
    element: <Push2 />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/admin",
    element: (
      <AdminLayout />
      // <Suspense fallback={<div>Loading...</div>}>
      //   <LazyHome />
      // </Suspense>
    ),
    children: [
      {
        path: "/users",
        element: <UserList />,
        children: [
          {
            path: "/test",
            element: <Test />,
          },
        ],
      },
      {
        path: "detail",
        element: <UserDetail />,
      },
      {
        path: "/settings",
        element: <Settings />,
      },
    ],
  },
]);

function App() {
  return <Router initialPath="/" routes={routesConfig} />;
}

export default App;