5步玩转React中的「Router」实现单页应用页面切换

Sun_light
1,057 阅读4分钟

在现代前端开发中，单页应用（SPA）已经成为主流。React 作为最受欢迎的前端框架之一，配合强大的路由库 react-router-dom，可以轻松实现页面的无刷新切换。本文将用简单易懂的语言，带你一步步掌握 React Router 的核心用法.🎉

1. 单页应用的本质与路由的意义

单页应用（Single Page Application，SPA）指的是整个项目只有一个 HTML 文件，所有页面都以组件的形式存在。页面切换时，并不会重新加载整个页面，而是通过“路由”机制，动态切换不同的组件，从而实现页面的切换效果。

举个例子：

  • 你访问 /home，显示首页组件；
  • 你访问 /about，显示关于我们组件；
  • 但其实页面底层只有一个 index.html，只是内容在变。

路由的作用就是：
当浏览器 URL 发生变化时，自动加载并渲染对应的组件。

2. 安装与引入 react-router-dom

要在 React 项目中使用路由，首先需要安装官方推荐的路由库：

npm install react-router-dom

安装完成后，就可以在项目中引入相关组件和钩子函数啦！

3. 路由的核心组件与用法

react-router-dom 提供了一套简单易用的 API，主要包括以下几个核心组件和钩子：

组件/钩子作用说明
BrowserRouter路由容器，包裹整个应用
Routes路由出口，包含所有 Route
Route路由项，配置路径与组件的映射
Link路由跳转链接，点击可切换页面
useNavigate路由跳转函数，代码中实现跳转
useSearchParams获取 URL 查询参数

下面我们通过一个小案例，逐步演示它们的用法。

3.1 路由容器 BrowserRouter

所有路由相关的内容都需要被 BrowserRouter 包裹。它会监听浏览器地址栏的变化，自动渲染对应的组件。

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 这里放路由相关内容 */}
    </BrowserRouter>
  );
}

3.2 路由出口 Routes 和路由项 Route

Routes 是所有路由的出口，内部可以放多个 Route，每个 Route 配置一个路径和对应的组件。

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

小结：

  • path 属性指定 URL 路径；
  • element 属性指定要渲染的组件。

3.3 路由跳转 Link 组件

Link 组件可以生成一个路由链接，点击后会切换到对应的页面，而且不会刷新整个页面，体验非常丝滑！✨

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

function Navbar() {
  return (
    <nav>
      <Link to="/home">首页</Link>
      <Link to="/about">关于我们</Link>
    </nav>
  );
}

小贴士：

  • Link 组件会自动阻止页面刷新，只改变 URL 和渲染内容。

3.4 路由跳转 useNavigate 钩子

有时候我们需要在代码中实现跳转，比如表单提交后跳转到结果页，这时可以用 useNavigate。

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 登录逻辑...
    navigate('/home'); // 跳转到首页
  };

  return <button onClick={handleLogin}>登录</button>;
}

小结：

  • useNavigate 返回一个跳转函数，调用时传入目标路径即可。

3.5 获取查询参数 useSearchParams

如果你的页面需要根据 URL 查询参数展示不同内容，可以用 useSearchParams 获取参数。

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get('q'); // 获取 ?q=xxx

  return <div>搜索关键词：{keyword}</div>;
}

4. 实战案例：实现一个简单的多页面切换

下面我们用最少的代码，做一个包含首页、关于页和搜索页的单页应用，体验路由的魅力！

目录结构示例：

src/
  pages/
    Home.jsx
    About.jsx
    Search.jsx
  App.jsx

Home.jsx

export default function Home() {
  return <h2>🏠 欢迎来到首页！</h2>;
}

About.jsx

export default function About() {
  return <h2>👨‍💻 关于我们</h2>;
}

Search.jsx

import { useSearchParams } from 'react-router-dom';

export default function Search() {
  const [params] = useSearchParams();
  return <h2>🔍 搜索内容：{params.get('q') || '无'}</h2>;
}

App.jsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Search from './pages/Search';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/home">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/search?q=react">搜索react</Link>
      </nav>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/search" element={<Search />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

效果演示：

ezgif-5177a9baaf6d21.gif

  • 点击“首页”显示 Home 组件内容；
  • 点击“关于”显示 About 组件内容；
  • 点击“搜索react”显示 Search 组件，并展示查询参数。

是不是很简单？只需几步，页面切换、参数获取全搞定！😄

5. 总结

React Router 让单页应用的页面切换变得异常简单。只要掌握以下 5 个核心点，你就能轻松实现复杂的页面导航：

  1. BrowserRouter：包裹整个应用，启用路由功能；
  2. Routes + Route：配置路径与组件的映射关系；
  3. Link：生成路由跳转链接，无刷新切换页面；
  4. useNavigate：在代码中灵活跳转页面；
  5. useSearchParams：获取 URL 查询参数，做个性化展示。

建议大家多动手实践，尝试自己搭建一个小型 SPA，体验路由的强大与便捷。遇到问题时，回头看看这篇文章，保证你能快速找到答案！💡

avatar
文章
阅读
粉丝