React Router：从旧版路由迁移到现代路由

npm install react-router

import {
  BrowserRouter,
  Link,
  NavLink,
  Outlet,
  Route,
  Routes,
  useParams,
} from "react-router";

export default function App() {
  return (
    <BrowserRouter>
      <nav aria-label="主导航">
        <NavLink to="/" end>首页</NavLink>
        <NavLink to="/projects">项目</NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="projects" element={<ProjectsLayout />}>
          <Route index element={<ProjectList />} />
          <Route path=":projectId" element={<ProjectDetail />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function ProjectsLayout() {
  return (
    <main>
      <h1>项目</h1>
      <Outlet />
    </main>
  );
}

function ProjectList() {
  return <Link to="42">打开项目 42</Link>;
}

function ProjectDetail() {
  const { projectId } = useParams();
  return <h2>项目编号：{projectId}</h2>;
}

function Home() {
  return <h1>首页</h1>;
}

function NotFound() {
  return <h1>页面不存在</h1>;
}

import { useNavigate } from "react-router";

function CreateProjectButton() {
  const navigate = useNavigate();

  async function createProject() {
    const project = await saveProject();
    navigate("/projects/" + project.id);
  }

  return <button onClick={createProject}>创建项目</button>;
}

import ReactDOM from "react-dom/client";
import { createBrowserRouter, Outlet, useLoaderData } from "react-router";
import { RouterProvider } from "react-router/dom";

async function projectLoader({ params, request }) {
  const response = await fetch(
    "/api/projects/" + encodeURIComponent(params.projectId),
    { credentials: "same-origin", signal: request.signal },
  );

  if (!response.ok) {
    throw new Response("项目加载失败", { status: response.status });
  }

  return response.json();
}

function ProjectPage() {
  const project = useLoaderData();
  return <h1>{project.name}</h1>;
}

function RootLayout() {
  return <main><Outlet /></main>;
}

function Home() {
  return <h1>首页</h1>;
}

function ProjectError() {
  return <p role="alert">暂时无法加载项目，请稍后重试。</p>;
}

const router = createBrowserRouter([
  {
    path: "/",
    Component: RootLayout,
    children: [
      { index: true, Component: Home },
      {
        path: "projects/:projectId",
        loader: projectLoader,
        Component: ProjectPage,
        ErrorBoundary: ProjectError,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />,
);