目前是V7。

跟Vue的Router很相似。它的作用就是，根据不同的URL，匹配不同的组件，然后进行渲染。这样就可以实现在单页面应用中跳转页面

安装

设计了三种配置模式

脚手架

npx create-react-router@latest my-react-router-app # 创建项目
cd my-react-router-app # 进入项目
npm i # 安装依赖
npm run dev # 启动项目

添加到依赖

npm i react-router #V7不在需要 react-router-dom

数据模式和声明模式的区别，数据模式可以享用React-router所有的功能，包括数据处理。而声明模式只能享用React-router的一部分功能，比如路由跳转。

数据模式

export const router = createBrowserRouter([
  {
    path: '/',
    Component: Home,
  },
  {
    path: '/about',
    Component: About,
  },
]);

声明模式

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";
import About from '../about'
const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

基础使用

import { createBrowserRouter } from 'react-router';
import Home from '../pages/Home';
import About from '../pages/About';

const router = createBrowserRouter([
  {
    path: '/',
    Component: Home,
  },
  {
    path: '/about',
    Component: About,
  },
]);

export default router;

import React from 'react';
import { RouterProvider } from 'react-router';
import router from './router';
const App: React.FC = () => {
  return (
    <>
      <RouterProvider router={router} /> 
      // 所有数据路由对象都将传递给该组件，以渲染应用程序并启用其他数据 API。
    </>
  );
}

export default App;

import { NavLink } from 'react-router';
const Home: React.FC = () => {
  return (
    <div>
      <NavLink to="/about">About</NavLink> // 类似于router-link
    </div>
  );
};

export default Home;

路由模式

• createBrowserRouter
  • 使用HTML5的history API (pushState, replaceState, popState)
  • 需要服务器端支持，否则会刷新404
  • 场景：大多数现代浏览器环境，需要URL美观
• createHashRouter
  • 使用URL的hash部分(#/search, #/about, #/user/123)
  • 刷新页面不会丢失
  • 场景：静态站点托管，不需要服务器端支持
• createMemoryRouter
  • 使用内存中的路由表
  • 刷新页面会丢失状态
  • 切换页面路由不显示URL
  • 场景：非浏览器环境(React Native, Electron，测试环境)
• createStaticRouter（SSR）
  • 在服务器端匹配请求路径，生成静态 HTML
  • 需与客户端路由器（如 createBrowserRouter）配合使用
  • 场景：SEO，SSR

路由布局种类