适合小白初识React-Router的一篇文章

SortWorld
104 阅读5分钟

React Router：现代前端应用的路由管理指南

最近小编也是在努力Focus学习，接下来小编将会通过两篇文章来引导大家初识React当中路由的学习。在现代前端开发中，单页应用（SPA）已经成为主流的开发方式。而 React Router 作为 React 生态系统中的重要组成部分，为我们提供了强大的路由管理能力。本文将详细介绍 React Router 的基础概念和使用方法，帮助你快速掌握这一重要技术。

一、什么是路由？

路由本质上是一种映射关系，将特定的 URL 路径映射到相应的内容展示。根据实现方式和职责不同，路由可以分为两类：

1. 后端路由

后端路由是传统Web开发模式下的主要路由方式，主要用于暴露服务端资源。在这种模式下，当用户访问不同的URL时，服务器会根据路由规则返回对应的HTML页面。

server -> http -> 路由(后端) -> 响应html网页

这种方式的优点是简单直接，但缺点是前后端耦合度高，不利于前后端分离开发。

2. 前端路由

前端路由是现代 SPA 应用的核心，它允许在不刷新整个页面的情况下更新视图内容。React Router 正是一种实现前端路由的解决方案。

<Router>
  <Navigation />
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/about' element={<About />} />
    <Route path='/user/:id' element={<UserProfile />} />
  </Routes>
</Router>

二、React Router 基础组件

1. Router 组件

Router 是 React Router 的核心容器组件，所有路由相关的组件都需要放在它内部。常用的 Router 有 BrowserRouter（使用 HTML5 history API）和 HashRouter（使用 URL 的 hash 部分）。

import { BrowserRouter as Router } from 'react-router-dom'

function App() {
  return (
    <Router>
      {/* 路由相关组件 */}
    </Router>
  )
}

2. Routes 和 Route 组件

Routes 是路由规则的容器，而 Route 则定义了具体的路由规则。

<Routes>
  <Route path='/' element={<Home />} />
  <Route path='/about' element={<About />} />
  <Route path='/user/:id' element={<UserProfile />} />
</Routes>

其中：

  • path 属性定义了 URL 路径
  • element 属性指定了匹配该路径时要渲染的组件
  • 路径中的 :id 是动态参数，可以通过 useParams hook 获取

三、导航与链接

1. Link 组件

Link 组件用于创建导航链接，它会渲染为 HTML 的 <a> 标签，但不会导致整页刷新。

import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/user/:id">UserProfile</Link></li>
      </ul>
    </nav>
  )
}

四、动态路由参数

React Router 支持在路由路径中定义动态参数，用冒号加参数名的形式表示。

<Route path='/user/:id' element={<UserProfile />} />

在组件中，可以使用 useParams hook 获取这些参数：

import {
  useEffect
} from 'react'
import {
  useParams
} from 'react-router-dom'
const UserProfile = () => {
  const { id } = useParams();
  useEffect(() => {
    console.log(window.location);
  }, [])

  return (
    <>
      <h1>User Profile {id}</h1>
    </>
  )
}

export default UserProfile;

让我们来看看页面的实现效果展示吧：

userProfile.gif

五、嵌套路由

React Router 支持路由嵌套，这对于构建复杂的页面层次结构非常有用。

1. 嵌套路由定义

在 App.jsx 中定义嵌套路由：

<Route path='/products' element={<Products />} >
  {/* 二级路由 */}
  <Route path='productId' element={<ProductDetails />} />
  <Route path='new' element={<NewProduct />} />
</Route>

2. Outlet 组件

在父级路由组件中，使用 Outlet 组件作为子路由内容的占位符：

import { Outlet } from "react-router-dom";

const Products = () => {
  return (
    <>
      <h1>产品列表</h1>
      {/* 二级路由的占位符 */}
      <Outlet />
    </>
  )
}

当访问 /products/productId 时，<ProductDetails /> 组件将被渲染在 <Outlet /> 的位置。

3. 嵌套导航链接

在导航组件中也可以定义嵌套的导航链接：

<li><Link to="/products">Products</Link>
  <ul>
    <li><Link to="/products/productId">ProductDetails</Link></li>
    <li><Link to="/products/new">NewProduct</Link></li>
  </ul>
</li>

六、RESTful 路由设计

React Router 非常适合实现 RESTful 风格的前端路由。RESTful 是一种 URL 设计规范，主要关注资源的描述方式：

  • GET /user/:id - 获取用户信息
  • GET /post/:id - 显示某篇文章
  • POST /post - 新增文章
  • PATCH /post/:id - 修改文章
  • DELETE /post/:id - 删除文章

在前端路由中，我们可以根据这些规范设计对应的路径和组件：

<Route path='/users/:id' element={<UserProfile />} />
<Route path='/posts/:id' element={<PostDetails />} />
<Route path='/posts/new' element={<NewPost />} />
<Route path='/posts/:id/edit' element={<EditPost />} />

七、前后端分离架构

React Router 是前后端分离架构的重要组成部分。在这种架构下：

  1. 后端提供 API 接口，返回 JSON 数据而非 HTML 页面
  2. 前端负责路由管理、视图渲染和状态管理
  3. 前后端通过 API 接口进行数据交互
前端: React(视图) + React Router(路由) + 状态管理(useState/Redux)
后端: RESTful API 接口 + 数据库操作

这种分离带来了几个好处：

  1. 前后端可以独立开发，提高开发效率
  2. 前端可以专注于用户体验优化
  3. 后端可以专注于业务逻辑和数据处理
  4. API 可以服务于多种客户端（Web、移动应用等）

八、完整示例

以下是一个完整的 React Router 示例代码：App.jsx

import {
  BrowserRouter as Router,
  Routes,
  Route
} from 'react-router-dom'
import './App.css'
import Navigation from './components/Navigation'
import Home from './pages/Home'
import About from './pages/About'
import UserProfile from './pages/UserProfile'
import Products from './pages/Products'
import ProductDetails from './pages/Products/ProductDetails'
import NewProduct from './pages/Products/NewProduct'

function App() {
  return (
    <>
      {/* 前端路由接管一切，配置 */}
      <Router>
        <Navigation />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={<About />} />
          <Route path='/user/:id' element={<UserProfile />} />
          <Route path='/products' element={<Products />} >
            {/* 二级路由 */}
            <Route path='productId' element={<ProductDetails />} />
            <Route path='new' element={<NewProduct />} />
          </Route>
        </Routes>
      </Router>
    </>
  )
}

export default App

创建导航栏子组件当中的代码Navigation.index:

import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/user/:id">UserProfile</Link></li>
        <li><Link to="/products">Products</Link>
          <ul>
            <li><Link to="/products/productId">ProductDetails</Link></li>
            <li><Link to="/products/new">NewProduct</Link></li>
          </ul>
        </li>
      </ul>
    </nav>
  )
}

export default Navigation;

接下来比较复杂的便是userProfile路由啦

import {
  useEffect
} from 'react'
import {
  useParams
} from 'react-router-dom'
const UserProfile = () => {
  const { id } = useParams();
  useEffect(() => {
    console.log(window.location);
  }, [])

  return (
    <>
      <h1>User Profile {id}</h1>
    </>
  )
}

export default UserProfile;

当你看到这里，你大概就已经踏入了React-Router的基础入门啦，接下来的几篇文章我们将继续深入学习React-Router组件的文章内容。

总结

React Router 是 React 应用中不可或缺的路由解决方案，它使得前端能够自主管理页面导航和视图渲染。通过本文介绍的基础知识点，你已经可以开始在项目中使用 React Router 实现路由管理了。随着项目复杂度的增加，你还可以探索 React Router 提供的更多高级功能，如路由守卫、懒加载等。

前端路由的出现，标志着前端开发走向更加成熟和独立的阶段。借助 React Router 这样的工具，我们能够构建出体验更好、交互更流畅的现代 Web 应用。

avatar
文章
阅读
粉丝