安装

运行命令：

npm i react-router-dom

快速开始示例代码

src/router/index.tsx

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

// 1. 创建 router 实例对象，并配置路由对应关系
const router = createBrowserRouter([
  {
    path: "/login",
    element: <div>我是登录页</div>,
  },
  {
    path: "/article",
    element: <div>我是文章页</div>,
  },
]);

export { router };

src/main.tsc 或者 src/index.tsc

import React from "react";
import ReactDOM from "react-dom/client";
import { router } from "@/router";
import { RouterProvider } from "react-router-dom";

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

React路由的两种模式：history 与 hash

React 中 history 模式路由通过 createBrowerRouter() 创建； hash 模式路由通过 createHashRouter() 创建。
两种路由的差异：

路由模式	url表现	底层原理	是否需要后端支持
history	url/login	history对象 + pushState事件	需要
hash	url/#/login	监听hashChange事件	不需要