实践

React-Router

React Router 启用“客户端路由”。客户端路由允许您的应用通过链接点击更新 URL，而无需从服务器再次请求另一个文档。相反，您的应用程序可以立即呈现一些新的 UI 并使用 fetch 发出数据请求以使用新信息更新页面。 React 项目一般我们都会使用 react-router 来做路由管理，我们先来看个简单的示例，来看看如何使用 react-router，以及类型在其中起到的作用。

import { RouterProvider } from "react-router-dom";

export interface RouterProviderProps {
  fallbackElement?: React.ReactNode;
  router: Router;
}
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

从示例中可以看出最外层的组件 RouterProvider 需要接收一个 Router 类型的 props 用于渲染页面，

那我们就需要通过 createBrowserRouter:Router 并传入一个 RouteObject 类型的数组来创建 Router

import {createBrowserRouter} from 'react-router-dom'
import Root from "./routes/root";
import Dashboard from "./routes/Dashboard";

export declare function createBrowserRouter(routes: RouteObject[],
opts?: {
    basename?: string;
    hydrationData?: HydrationState;window?: Window;
}): Router;

interface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
}
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
        {path: "dashboard",element: <Dashboard />,
        },
      ],
  },
]);

react-router 还提供了将 ReactNode 转化为 RouterObject 的能力

即从对象改用 JSX 形式

export declare function createRoutesFromChildren(children: React.ReactNode, parentPath?: number[]): RouteObject[];

const router = createBrowserRouter(
  createRoutesFromElements(
  <Route path="/" element={<Root />}>
  <Route path="dashboard" element={<Dashboard />}/></Route>
  )
);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
    <RouterProvider router={router} />
</React.StrictMode>
);

实践

React-Router​

React-Router