React Router使用方法

简介

React Router 是 React 的多策略路由器。在React应用中最新的React Router7有三种使用模式，分别是声明模式、数据模式、框架模式。从声明式模式转变为数据模式再转变为框架模式会增加更多功能，但代价是架构控制。使用模式取决于我们使用的顶级路由器 API。

React Router的三种使用模式

声明模式

声明模式启用了基本的路由功能，如将URL与组件匹配、在应用程序中导航，以及通过、useNavigate和useLocation等API提供活动状态。

import { BrowserRouter } from "react-router";

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

数据模式

通过将路由配置移动到React渲染之外，数据模式使用loader、action和useFetcher等API添加了数据加载、操作、挂起状态等。数据模式将路由配置用hooks创建一个router实例，类似于Vue中的vue-router的使用方法，如果对Vue很熟悉，可以使用数据模式。

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    loader: loadRootData,
  },
]);

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

框架模式

框架模式将数据模式与Vite插件包装在一起，通过以下方式添加完整的React Router体验：

• 类型安全href
• 类型安全路由模块API
• 智能代码分割
• SPA、SSR和静态渲染策略

import { index, route } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("about", "./about.tsx"),
];

具体的使用模式选择和三种模式的API参考：React Router7选择使用模式

React Router7声明模式使用方法

我的 React 项目采用 Vite + TypeScript构建（使用JavaScript也不影响观看），声明模式的路由已经足够使用了，所以我采用声明式路由，这也是React Router的经典使用方法，数据模式使用方法是在v6.4版本之后引入的，类似vue-router的使用方式。

在入口文件引入BrowserRouter

BrowserRouter 是一个用于管理路由的组件，它的作用如下：

• 监听浏览器地址栏的变化，并根据路由配置渲染对应的组件。
• 允许用户通过浏览器的前进、后退按钮或代码中的导航操作改变 URL，并同步更新视图。
• 使用干净的URL，不像 HashRouter 那样带 # 号（ BrowserRouter和HashRouter的区别）。

// src/main.tsx
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { BrowserRouter } from "react-router";

createRoot(document.getElementById('root')!).render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
)

配置一个路由组件管理路由

在src目录下，我们新建一个文件夹routes，然后创建文件index.tsx，我们将所有的路由规则都写在这个组件中。

// /src/routes/index.tsx
import React from 'react';
import Layout from '@/views/Layout/index'
import Login from '@/views/Login/index'
import { Route, Routes } from 'react-router';
import Album from '@/views/Album';
import AddAlbum from '@/views/Album/AddAlbum';
import Photo from '@/views/Photo';
import Video from '@/views/Video';
import Home from '@/views/Home';
import AlbumList from '@/views/Album/AlbumList';
import DelAlbum from '@/views/Album/DelAlbum';
import EditAlbum from '@/views/Album/EditAlbum';

const APP: React.FC = () => {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />} />
          {/* 嵌套路由 */}
          <Route path='album' element={<Album />}>
            <Route index element={<AlbumList />}></Route>
            <Route path='addAlbum' element={<AddAlbum />}></Route>
            <Route path='delAlbum' element={<DelAlbum />}></Route>
            <Route path='editAlbum' element={<EditAlbum />}></Route>
          </Route>
          <Route path='photo' element={<Photo />} />
          <Route path='video' element={<Video />} />
        </Route>
        <Route path='/login' element={<Login />} />
      </Routes>
    </div>
  );
}
export default APP

Route 组件用于 定义 URL 路径，并指定在该路径下需要渲染的组件。Routes 是一个用于定义路由的组件，它管理多个 Route 组件，并根据当前 URL 渲染匹配的组件。@是使用了路径别名，可以直接从src目录开始寻找文件（vite+react项目配置项目路径别名）

将路由组件引入App.tsx

// /src/App.tsx
import React from 'react';
import Routes from '@/routes/index';

const App: React.FC = () => {
  return (
    <>
      <Routes></Routes>
    </>
  );
}
export default App

在App.tsx中引入路由组件后，创建对应的路由组件后就可以进行路由跳转了。

嵌套路由

我们在routes/index.tsx中使用了嵌套路由，嵌套路由中子路由的path属性不需要加 “/” 。

<Route path='album' element={<Album />}>
    <Route index element={<AlbumList />}></Route>
    <Route path='addAlbum' element={<AddAlbum />}></Route>
    <Route path='delAlbum' element={<DelAlbum />}></Route>
    <Route path='editAlbum' element={<EditAlbum />}></Route>
</Route>

对于这个嵌套路由，在父路由上我们需要加 Outlet 组件给子路由占位，代表子路由页面渲染的位置。在第一个子路由身上有index属性，代表默认显示的子路由页面。

// src/views/Album/index.tsx
import React from 'react';
import { Outlet } from 'react-router';

const Album: React.FC = () => {
  return (
    <Outlet/>
  );
}
export default Album;

对于其他子路由页面，我们可以简单设置一下，可以显示效果就行。

// src/views/Album/AlbumList.tsx
const AlbumList: React.FC = () => {
    return (
        <>
            <h1>相册列表</h1>
        </>
    )
}

export default EditAlbum;

链接式路由导航 <NavLink/> 和 <Link>

<NavLink/> 或 <Link> 可以生成一个路由链接，通过点击链接来进行路由跳转。 <NavLink/>该组件适用于那些需要渲染激活状态的导航链接。当 <NavLink> 处于激活状态时，它会自动拥有一个 .active 类名，以便于使用 CSS 轻松设置样式。不需要激活样式时，可以使用 <Link> 组件。

<NavLink to="/album" style={({ isActive }) => ({color: isActive ? "red" : "black",})}>
	相册
</NavLink>

<Link to="/album">相册</Link>

编程式路由导航

使用useNavigate这个钩子（hook）允许程序在无需用户交互的情况下将用户导航至新页面。使用场景如下：

• 表单提交完成之后
• 用户长时间没有操作退出系统
• 有时间限制的游戏界面等等场景

import { useEffect } from "react";
import { useNavigate } from "react-router";

const AddAlbum: React.FC = () => {
    const navigate = useNavigate();

    useEffect(() => {
        // 设置一个定时器，用于延迟 3 秒后进行页面跳转
        const timer = setTimeout(() => {
            navigate('/album/delAlbum');
        }, 3000)

        return () => {
            // 当组件卸载时，清除定时器。
            clearTimeout(timer)
        }
    }, [navigate])

    return (
        <div>
            <h1>这是新建相册页面，3秒后跳转到删除相册界面</h1>
        </div>
    )
}

export default AddAlbum;