React-router v7

React-router 是 React的路由库，如果你学过Vue，跟Vue的Router很相似。它的作用就是，根据不同的URL，匹配不同的组件，然后进行渲染。这样就可以实现在单页面应用中跳转页面。

安装

react-router在最新版本V7中，设计了三种模式

框架模式

框架模式就是使用，React-router 提供的脚手架模板去安装，安装完成后会自带路由功能。

perl 复制代码

bash
 体验AI代码助手
 代码解读
复制代码
npx create-react-router@latest my-react-router-app # 创建项目
cd my-react-router-app # 进入项目
npm i # 安装依赖
npm run dev # 启动项目

数据模式

数据模式就是，我们可以使用自己的模板去创建React项目，比如使用vite webpack 等，然后自己安装React-router。

less 复制代码

bash
 体验AI代码助手
 代码解读
复制代码
npm i react-router #V7不在需要 react-router-dom

php 复制代码

ts
 体验AI代码助手
 代码解读
复制代码
export const router = createBrowserRouter([
  {
    path: '/',
    Component: Home,
  },
  {
    path: '/about',
    Component: About,
  },
]);

声明模式

声明模式，也可以用自己的模板创建React项目，然后自己安装React-router。

less 复制代码

bash
 体验AI代码助手
 代码解读
复制代码
npm i react-router #V7不在需要 react-router-dom

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
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>
);

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

基本使用

src/router/index.ts

pages目录创建两个组件，Home和About

新建目录router，在目录中新建文件index.ts，在文件中引入React-router，然后使用createBrowserRouter创建路由。

javascript 复制代码

ts
 体验AI代码助手
 代码解读
复制代码
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;

src/App.tsx

在App.tsx文件中引入路由，然后使用RouterProvider包裹App组件。

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
import React from 'react';
import { RouterProvider } from 'react-router';
import router from './router';
const App: React.FC = () => {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

路由跳转

在Home组件中使用NavLink组件跳转到About组件。

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
import { NavLink } from 'react-router';
const Home: React.FC = () => {
  return (
    <div>
      <NavLink to="/about">About</NavLink>
    </div>
  );
};

export default Home;

在About组件中使用Link组件跳转到Home组件。

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
import { NavLink  } from 'react-router';
const About: React.FC = () => {
  return (
    <div>
      <NavLink to="/">Home</NavLink>
    </div>
  );
};

export default About;

路由模式

在React RouterV7 中，是拥有不同的路由模式，路由模式的选择将直接影响你的整个项目。React Router 提供了四种核心路由创建函数： createBrowserRouter、createHashRouter、createMemoryRouter 和 createStaticRouter

1. `createBrowserRouter(推荐)`

核心特点：

使用HTML5的history API (pushState, replaceState, popState)
浏览器URL比较纯净 (/search, /about, /user/123)
需要服务器端支持(nginx, apache,等)否则会刷新404

使用场景：

大多数现代浏览器环境
需要服务器端支持
需要URL美观

2. `createHashRouter`

核心特点：

使用URL的hash部分(#/search, #/about, #/user/123)
不需要服务器端支持
刷新页面不会丢失

使用场景：

静态站点托管例如(github pages, netlify, vercel)
不需要服务器端支持

3. `createMemoryRouter`

核心特点：

使用内存中的路由表
刷新页面会丢失状态
切换页面路由不显示URL

使用场景：

非浏览器环境例如(React Native, Electron)
单元测试或者组件测试(Jest, Vitest)

4. `createStaticRouter`

核心特点：

专为服务端渲染（SSR）设计
在服务器端匹配请求路径，生成静态 HTML
需与客户端路由器（如 createBrowserRouter）配合使用

使用场景：

服务端渲染应用（如 Next.js 的兼容方案）
需要SEO优化的页面

解决刷新404问题

当使用createBrowserRouter时，如果刷新页面会丢失状态，这是因为浏览器默认会去请求服务器上的资源，如果服务器上没有资源，就会返回404。要解决这个问题就需要在服务器配置一个回退路由，当请求的资源不存在时，返回index.html。

Nginx(推荐)

下载地址：Nginx

bash 复制代码

bash
 体验AI代码助手
 代码解读
复制代码
location / {
  try_files $uri $uri/ /index.html;
}

nginx -s reload // 重载nginx配置文件

Apache

ruby 复制代码

bash
 体验AI代码助手
 代码解读
复制代码
<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Vercel

json 复制代码

json
 体验AI代码助手
 代码解读
复制代码
{
  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

Nodejs

javascript 复制代码

js
 体验AI代码助手
 代码解读
复制代码
const http = require('http')
const fs = require('fs')
const httpPort = 80

http
  .createServer((req, res) => {
    fs.readFile('index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('We cannot open "index.html" file.')
      }

      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
      })

      res.end(content)
    })
  })
  .listen(httpPort, () => {
    console.log('Server listening on: http://localhost:%s', httpPort)
  })

路由种类

React-Router V7 的路由种类是非常多的，有嵌套路由 布局路由 索引路由 前缀路由 动态路由，大致上是分为这五种的，下面我们一一介绍

Layout

我们在演示上面几种路由之前，先对界面进行一个布局，方便我们后续的演示,UI组件我们使用antd。

复制代码

bash
 体验AI代码助手
 代码解读
复制代码
npm install antd

我们创建一个layout文件夹，在文件夹中创建一个Content Header Menu 文件夹，在文件夹中创建一个index.tsx文件，文件内容如下：

src/layout/Menu/index.tsx 菜单页面

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
import { Menu as AntdMenu } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd'
import { useNavigate } from 'react-router';
export default function Menu() {
    const navigate = useNavigate();//编程式导航
    const handleClick: MenuProps['onClick'] = (info) => {
         navigate(info.key) // 点击菜单项时，导航到对应的页面
    };
    const menuItems = [
        {
            key: '/home',
            label: 'Home',
            icon: <AppstoreOutlined />,
        },
        {
            key: '/about',
            label: 'About',
            icon: <AppstoreOutlined />,
        },
    ];
    return <AntdMenu onClick={handleClick} style={{ height: '100vh' }} items={menuItems} />;
}

src/layout/Header/index.tsx 头部页面

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
import { Breadcrumb } from 'antd';

export default function Header() {
  return <Breadcrumb 
    items={[
      {
        title: 'Home',
      },
      {
        title: 'List',
      },
      {
        title: 'App',
      },
    ]}
  />;
}

src/layout/Content/index.tsx 内容页面

javascript 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
import { Outlet } from 'react-router';
export default function Content() {
  return <Outlet />;
}

嵌套路由

嵌套路由就是父路由中嵌套子路由children，子路由可以继承父路由的布局，也可以有自己的布局。

注意事项：

父路由的path 是 index开始，所以访问子路由的时候需要加上父路由的path例如 /index/home /index/about
子路由不需要增加/了直接写子路由的path即可
子路由默认是不显示的，需要父路由通过 Outlet 组件来显示子路由 outlet 就是类似于Vue的<router-view>展示子路由的一个容器

php 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
const router = createBrowserRouter([
    {
        path: '/index',
        Component: Layout, // 父路由
        children: [ 
            {
                path: 'home',
                Component: Home, // 子路由
            },
            {
                path: 'about',
                Component: About, // 子路由
            },
        ]
    },
]);

import { Outlet } from 'react-router';
function Content() {
  return <Outlet />; //容器
}

布局路由

布局路由是一种特殊的嵌套路由，父路由可以省略 path，这样不会向 URL 添加额外的路径段：

php 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
const router = createBrowserRouter([
    { 
        // path: '/index', //省略 
        Component: Layout,
        children: [
            {
                path: 'home',
                Component: Home,
            },
            {
                path: 'about',
                Component: About,
            },
        ]
    },
]);

索引路由

索引路由使用 index: true 来定义，作为父路由的默认子路由：

yaml 复制代码

ts
 体验AI代码助手
 代码解读
复制代码
{ index: true, Component: Home }

索引路由在其父级的 URL 处呈现到其父级的Outlet中

php 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
const router = createBrowserRouter([
    {
        path: '/',
        Component: Layout,
        children: [
            {
                index: true, 
                // path: 'home',
                Component: Home,
            },
            {
                path: 'about',
                Component: About,
            },
        ]
    },
]);

前缀路由

前缀路由只设置 path 而不设置 Component，用于给一组路由添加统一的路径前缀：

php 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
const router = createBrowserRouter([
    {
        path: '/project',
        //Component: Layout, //省略 
        children: [
            {
                path: 'home',
                Component: Home,
            },
            {
                path: 'about',
                Component: About,
            },
        ]
    },
]);

动态路由

动态路由通过 :参数名 语法来定义动态段：

访问规则如下 http://localhost:3000/home/123

php 复制代码

tsx
 体验AI代码助手
 代码解读
复制代码
const router = createBrowserRouter([
    {
        path: '/',
        Component: Layout,
        children: [
            {
                path: 'home/:id', 
                Component: Home,
            },
            {
                path: 'about',
                Component: About,
            },
        ]
    },
]);


//在组件中获取参数
import { useParams } from "react-router";

function Card() {
  let params = useParams();
  console.log(params.id);
}

。

React-router v7

React-Router V7

安装

基本使用

路由跳转

路由模式

1. createBrowserRouter(推荐)

核心特点：

使用场景：

2. createHashRouter

核心特点：

使用场景：

3. createMemoryRouter

核心特点：

使用场景：

4. createStaticRouter

核心特点：

使用场景：

解决刷新404问题

路由种类

Layout

嵌套路由

布局路由

索引路由

前缀路由

动态路由

1. `createBrowserRouter(推荐)`

2. `createHashRouter`

3. `createMemoryRouter`

4. `createStaticRouter`