实战指南：React 路由与Ant Design集成

本文是《React管理平台》第四节，通过本文，你将学到如何使用 react-router-dom 创建和使用组件路由

路由管理：如何在React项目中集成react-router-dom

使用前的准备：安装react-router-dom

为了在React项目中使用路由功能，首先需要安装 react-router-dom。你可以使用以下命令之一，基于你的包管理器来安装这个库：

bash 复制代码

# 使用pnpm
pnpm i react-router-dom

# 使用npm
npm i react-router-dom

# 使用yarn
yarn add react-router-dom

安装完成后，就可以在项目中导入和使用 react-router-dom 提供的组件和钩子了。

创建必要的页面组件

在路由系统中，我们需要有几个页面来对应不同的路由路径。以下是我们需要准备的页面：

欢迎页面（首页）：向用户呈现应用程序的门面页面。
登录页面：为用户提供输入凭证以访问特定资源的界面。
403页面：当正在访问的用户没有足够权限时，展示此页面。
404页面：用户尝试访问不存在的路由时，展示此页面。

对应的页面文件应创建在 src/pages 目录中，并用简单的文本标记内容。例如：

欢迎页面 (src/pages/Welcome/Welcome.tsx):

tsx 复制代码

export function Welcome() {
  return <div>欢迎页面</div>;
}

登录页面 (src/pages/Login/Login.tsx):

tsx 复制代码

export function Login() {
  return <div>登录页</div>;
}

权限不足页面 (src/pages/403.tsx):

tsx 复制代码

export function NoAccess() {
  return <div>403未授权</div>;
}

页面未找到 (src/pages/404.tsx):

tsx 复制代码

export function NotFound() {
  return <div>404页面未找到</div>;
}

创建和配置路由

现在已创建必要的页面文件，我们要组织这些页面与路由的映射。这通过创建 src/router/index.tsx 文件实现，并定义一个 routes 配置数组，其中包含每个路由的路径和对应的页面组件。

tsx 复制代码

import { Navigate, useRoutes } from 'react-router-dom';
import { Welcome } from '@/pages/Welcome/Welcome';
import { Login } from '@/pages/Login/Login';
import NoAccess from '@/pages/403';
import NotFound from '@/pages/404';

const routes = [
  {
    path: '/',
    element: <Welcome />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/403',
    element: <NoAccess />
  },
  {
    path: '/404',
    element: <NotFound />
  },
  {
    path: '*',
    element: <Navigate to='/404' />
  }
];

export default function Router() {
  return useRoutes(routes);
}

在这段代码中，useRoutes 是 react-router-dom 库提供的一个React钩子（Hook），它的作用是根据给定的路由配置数组（ routes ）来动态创建并返回路由元素。useRoutes简化了路由的渲染逻辑，允许开发者以声明式的方式直接在组件中定义路由。

useRoutes 接收一个路由配置数组，每个配置对象表示一个路由规则，包括了路径（path）和对应要渲染的元素（element）。当URL改变时，useRoutes 会匹配路径与URL，并返回相应的元素以渲染。

这些路由配置包括：

'/' 路径对应的 Welcome 组件
'/login' 路径对应的 Login 组件
'/403' 路径对应的 Error403 组件
'/404' 路径对应的 Error404 组件
'*' 路径表示不匹配以上任何路径时，将使用 <Navigate to={'/404'} /> 重定向到 '/404' 路径

由于文件路径中使用@别名，需要确保tsconfig.json文件与vite.config.ts文件都设置了@映射：

将路由集成到应用程序

有了路由配置文件之后，需要将其集成到React应用中。这是通过在 App.tsx 文件中导入并包裹 Router 组件以使用 HashRouter 完成的，如以下代码所示：

tsx 复制代码

import { HashRouter } from 'react-router-dom';
import Router from './router';

function App() {
  return (
    <HashRouter>
      <Router />
    </HashRouter>
  );
}

export default App;

在这段代码中，HashRouter 使用URL的哈希部分（即URL中#符号后面的部分）来保持用户界面（UI）和URL之间的同步。当使用 HashRouter 时，应用程序的状态（即当前的路由位置）存储在URL的哈希部分，这意味着每次哈希发生变化时，HashRouter 都会对应更新页面内容。

除了 HashRouter，react-router-dom 还提供了 BrowserRouter，它使用HTML5的history API来保持UI和URL同步，这使得URL看起来像传统的http路径，在不包含#符号。

选择 HashRouter 还是 BrowserRouter 主要取决于项目需求和服务器部署环境：

HashRouter:
- 不需要服务器配置即可处理路由，因为路由的状态是通过URL的哈希部分维护的。
- 由于所有的请求都会被发送到根URL，它可以很好地支持静态文件服务器和那些没有URL重写能力的服务器。
- 哈希更改不会导致浏览器向服务器发送请求，所有的资源加载都是在第一次页面加载时完成的。
- URL中的哈希部分通常不会发送到服务器，对于SEO（搜索引擎优化）来说可能不如BrowserRouter好。
BrowserRouter:
- 提供了干净的URL，不包含哈希部分，看起来更美观、传统，并对SEO友好。
- 需要服务器正确配置，以便对所有可能的URL路径给予一个基础页面（通常是index.html）响应，并让React Router处理后续的路由。
- 常用于服务器支持所有路由路径的动态处理或者有前后端完全分离且前端部署到支持history模式的服务器的现代web应用。

优化403和404页面

最后，为了提高用户体验，我们将使用Ant Design的React UI库中的Result组件来优化403和404页面。首先需要安装Ant Design库：

csharp 复制代码

# 使用pnpm
pnpm i antd

# 使用npm
npm i antd

# 使用yarn
yarn add antd

然后我们将在403和404页面中使用Result组件，并提供一个按钮让用户可以返回首页：

403页面示例代码 (src/pages/403.tsx):

tsx 复制代码

// 403.tsx
import { Button, Result } from 'antd'
import { useNavigate } from 'react-router-dom'
const NoAccess = () => {
  const navigate = useNavigate()
  const handleClick = () => {
    navigate('/')
  }
  return (
    <Result
      status='403'
      title='403'
      subTitle='抱歉，您无权访问这个页面。'
      extra={
        <Button type='primary' onClick={handleClick}>
          回到首页
        </Button>
      }
    />
  )
}

export default NoAccess

404页面示例代码 (src/pages/404.tsx):

tsx 复制代码

// 404.tsx
import { Button, Result } from 'antd'
import { useNavigate } from 'react-router-dom'
const NotFound = () => {
  const navigate = useNavigate()
  const handleClick = () => {
    navigate('/')
  }
  return (
    <Result
      status='404'
      title='404'
      subTitle='抱歉，您访问的页面不存在。'
      extra={
        <Button type='primary' onClick={handleClick}>
          回到首页
        </Button>
      }
    />
  )
}

export default NotFound

在浏览器中的效果

总结

我们首先介绍了如何安装react-router-dom，然后创建了几个基本页面，举例说明如何设置这些页面的路由。接着，展示了如何在项目中安装Ant Design，并利用其提供的Result组件来增强异常页面（如403和404页面）的用户体验。最后，给出了浏览器中的最终效果，并通过动态演示来展现路由和界面组件的交互。