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

辰火流光
1,137 阅读5分钟

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

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

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

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

# 使用pnpm
pnpm i react-router-dom

# 使用npm
npm i react-router-dom

# 使用yarn
yarn add react-router-dom

image.png

安装完成后，就可以在项目中导入和使用 react-router-dom 了。

创建必要的页面组件

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

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

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

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

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

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

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

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

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

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

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

创建和配置路由

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

import { Navigate, createBrowserRouter } from 'react-router-dom'
import { Login } from '@/pages/Login/Login.tsx'
import Error403 from '@/pages/403.tsx'
import Error404 from '@/pages/404.tsx'
import { Welcome } from '@/pages/Welcome/Welcome.tsx'

const routes = [
  {
    path: '/',
    element: <Navigate to='/welcome' />
  },
  {
    path: '/welcome',
    element: <Welcome />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/403',
    element: <Error403 />
  },
  {
    path: '/404',
    element: <Error404 />
  },
  {
    path: '*',
    element: <Navigate to={'/404'} />
  }
]
export default createBrowserRouter(routes)

createBrowserRouter是react-router-dom库中的一种方法，主要用于创建一个使用HTML5 history API的路由对象。这种路由对象在浏览器环境中非常有用，因为它允许我们利用HTML5 history API（如pushState、replaceState和popstate事件）在前端进行页面的无刷新跳转。

应用这个函数时，传入一个配置数组参数routes，数组中的每个对象代表一个路由规则，包括路由路径path和对应渲染的元素element。

当用户访问特定URL时，React Router会比对routes中定义的路由规则，找到与当前URL匹配的路由，然后渲染对应的React元素。

这些路由配置包括：

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

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

image.png

将路由集成到应用程序

有了路由配置文件之后，需要将其集成到React应用中。这是通过在 App.tsx 文件中导入RouterProvider 组件完成的。

RouterProvider 是所有路由器组件的父组件。 RouterProvider 的主要任务就是在 React 组件的上下文中提供一个路由器实例。

所有的路由组件（比如Route，Switch,Link 等）都会通过 React 的 Context API 去获取这个提供的路由器实例，并使用这个实例执行相应的任务。这样的设计意味着我们不必将路由器实例作为参数传递给每一个路由组件，可以提高代码效率。

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

function App() {
  return (
    <RouterProvider router={router} />
  );
}

export default App;

在上面的代码中， RouterProvider 接收一个 router 属性，该属性值就是我们想要在应用中使用的路由器实例。所以 router={router} 的作用就是向 RouterProvider 提供一个路由器实例（由 createBrowserRouter(routes) 创建得来），然后组件会将这个实例放到 React 的上下文中去，供所有的路由组件使用。

优化403和404页面

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

# 使用pnpm
pnpm i antd

# 使用npm
npm i antd

# 使用yarn
yarn add antd

image.png

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

403页面示例代码 (src/pages/403.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):

// 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

在浏览器中的效果

动画.gif

总结

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

avatar
文章
阅读
粉丝