React中的路由艺术：用react-router-dom实现无缝页面切换

在现代前端开发中，单页应用(SPA)已成为主流，而路由则是SPA的核心功能之一。本文将介绍如何在React中使用react-router-dom库实现页面导航和路由控制。

什么是单页应用？

单页应用(SPA)是指整个应用只有一个HTML文件，通过动态加载不同组件来模拟多页面体验。如README中所说：

"只有一个html文件，将每一个页面都开发成一个组件，通过某一种手段来控制当前加载哪一个组件，来实现页面的切换效果"

React Router 基础

React Router是React生态中最流行的路由解决方案。首先需要安装：

bash 复制代码

npm i react-router-dom

核心组件

BrowserRouter：使用HTML5 history API实现的路由模式
Routes：路由出口，包含所有路由规则
Route：定义路径与组件的映射关系

路由配置示例

让我们看看App.jsx中的基本路由配置：

jsx 复制代码

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App() {
  return (
    <div>
      <BrowserRouter>
        <Link to="/home">首页</Link>
        <Link to="/about">关于</Link>

        <Routes>
          <Route path='/home' element={<Home/>} />
          <Route path='/about' element={<About/>} />
          <Route path='/user' element={<User/>} />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

这里我们：

使用BrowserRouter包裹整个路由系统
用Link组件创建导航链接
在Routes中定义路由规则，指定每个路径对应的组件

页面导航

在React组件中，我们有两种方式进行导航：

1. 使用Link组件（声明式导航）

jsx 复制代码

<Link to="/about">关于</Link>

2. 使用useNavigate钩子（编程式导航）

Home.jsx中展示了如何使用编程式导航：

jsx 复制代码

import { useNavigate } from "react-router-dom"

function Home() {
  const navigate = useNavigate()

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={() => {navigate('/user?id=1')}}>去用户页面</button>
    </div>
  )
}

获取URL参数

User.jsx展示了如何获取URL查询参数：

jsx 复制代码

import { useSearchParams } from "react-router-dom" 

function User() {
  const [params] = useSearchParams()

  return (
    <h4>用户页面 -- {params.get('id')}</h4>
  )
}

当访问/user?id=1时，页面会显示"用户页面 -- 1"。

总结

React Router提供了强大而灵活的路由功能，让我们能够：

通过BrowserRouter设置路由模式
通过Link或useNavigate实现导航
使用useSearchParams获取URL参数

希望本文能帮助你快速上手React Router！在实际项目中，你还可以探索更多高级功能，如嵌套路由、路由守卫、懒加载等。