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;