React-Router

安装

npm install react-router-dom

开始

main.tsx

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

const router = createBrowserRouter([
  { path: "/", element: <h1>Hello World!</h1> }, 
  { path: "/about", element: <h1>Hello About!</h1> }, 
]);

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

组件

Link

有效优化跳转性能

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

<Link to="/about">To About</Link>;

Outlet

类似 Layout 子组件的作用

main.tsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      { path: "/", element: <h1>Hello World!</h1> },
      { path: "/about", element: <h1>Hello About!</h1> },
    ],
  },
]);

Layout.tsx

import { Link, Outlet } from "react-router-dom";

const LayoutPage = () => {
  return (
    <>
      <Link to="/">To Home</Link>
      <Link to="/about">To About</Link>
      <Outlet />
    </>
  );
};

export default LayoutPage;

NavLink

导航链接，能知道自己的状态

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

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>;

Hooks

useLoaderData

页面加载前获取数据，也可以用来获取 url 里的参数

main.tsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/posts/:id",
        element: <Posts />,
        loader: async ({ params }) => {
          return {
            id: params.id,
          };
        },
      },
    ],
  },
]);

Posts.tsx

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

const PostsPage = () => {
  const { id } = useLoaderData();
  console.log(id);
  return <h1>Hello Posts!</h1>;
};

export default PostsPage;

参考

React-Router 官网

2023 最新 React Router 基础及 Data API ｜粤语中字_哔哩哔哩_bilibili