React 路由：构建单页面应用的导航系统

阿珊和她的猫2026-01-29 19:56

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在现代前端开发中，单页面应用（SPA）已经成为主流的开发模式。React 路由是实现单页面应用导航的核心工具，它允许用户在不同的视图之间切换，而无需重新加载整个页面。本文将详细介绍 React 路由的基本概念、实现方式、使用方法以及最佳实践。

一、React 路由概述

React 路由是指在 React 应用中实现页面导航的方式。通过路由，用户可以在不同的组件之间切换，而无需重新加载整个页面。React 路由的核心是通过 URL 的变化来控制组件的显示和隐藏。

核心概念

  1. 路由（Route）：定义了 URL 和组件之间的映射关系。
  2. 路由器（Router）：管理路由的组件，负责根据当前 URL 渲染对应的组件。
  3. 链接（Link）：用于创建导航链接，允许用户在不同的路由之间切换。
  4. 参数（Params）：通过 URL 传递的动态参数，用于获取路由中的动态数据。

二、React 路由的实现方式

React 路由可以通过多种方式实现，最常用的是使用 react-router-dom 库。react-router-dom 是一个专门为 React 设计的路由库，提供了丰富的路由功能。

（一）安装 react-router-dom

首先，需要安装 react-router-dom：

bash 复制代码 
npm install react-router-dom

（二）配置路由

在应用中配置路由，通常在根组件中设置路由器，并定义各个路由。

javascript 复制代码 
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/contact">Contact</Link>
                        </li>
                    </ul>
                </nav>

                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </div>
        </Router>
    );
}

export default App;

（三）创建路由组件

每个路由对应一个组件，这些组件可以根据 URL 的变化进行渲染。

javascript 复制代码 
// Home.js
import React from 'react';

function Home() {
    return <div>Home Page</div>;
}

export default Home;

// About.js
import React from 'react';

function About() {
    return <div>About Page</div>;
}

export default About;

// Contact.js
import React from 'react';

function Contact() {
    return <div>Contact Page</div>;
}

export default Contact;

（四）使用路由参数

路由参数允许你在 URL 中传递动态数据。例如，访问用户详情页面时，可以通过 URL 传递用户 ID。

javascript 复制代码 
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import UserProfile from './UserProfile';

function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/contact">Contact</Link>
                        </li>
                    </ul>
                </nav>

                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                    <Route path="/user/:userId" component={UserProfile} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

// UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
    const { userId } = useParams();

    return <div>User Profile: {userId}</div>;
}

export default UserProfile;

（五）嵌套路由

嵌套路由允许你在组件内部定义子路由，实现更复杂的导航结构。

javascript 复制代码 
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import UserProfile from './UserProfile';
import Dashboard from './Dashboard';

function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/contact">Contact</Link>
                        </li>
                        <li>
                            <Link to="/dashboard">Dashboard</Link>
                        </li>
                    </ul>
                </nav>

                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                    <Route path="/user/:userId" component={UserProfile} />
                    <Route path="/dashboard" component={Dashboard} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import DashboardHome from './DashboardHome';
import DashboardSettings from './DashboardSettings';

function Dashboard() {
    return (
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/dashboard/home">Home</Link>
                    </li>
                    <li>
                        <Link to="/dashboard/settings">Settings</Link>
                    </li>
                </ul>
            </nav>

            <Switch>
                <Route path="/dashboard/home" component={DashboardHome} />
                <Route path="/dashboard/settings" component={DashboardSettings} />
            </Switch>
        </div>
    );
}

export default Dashboard;

// DashboardHome.js
import React from 'react';

function DashboardHome() {
    return <div>Dashboard Home</div>;
}

export default DashboardHome;

// DashboardSettings.js
import React from 'react';

function DashboardSettings() {
    return <div>Dashboard Settings</div>;
}

export default DashboardSettings;

三、React 路由的最佳实践

（一）合理组织路由结构

根据应用的功能模块，合理组织路由结构。例如，将相关功能的路由放在同一个模块中，使用嵌套路由实现更复杂的导航结构。

（二）使用 Switch 组件

Switch 组件可以确保在任何给定时间只有一个路由被渲染。如果没有匹配的路由，可以渲染一个默认的 404 页面。

javascript 复制代码 
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';

function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/contact">Contact</Link>
                        </li>
                    </ul>
                </nav>

                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                    <Route component={NotFound} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

// NotFound.js
import React from 'react';

function NotFound() {
    return <div>404 Not Found</div>;
}

export default NotFound;

（三）使用路由参数

通过路由参数传递动态数据，例如用户 ID 或文章 ID。使用 useParams Hook 获取路由参数。

javascript 复制代码 
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
    const { userId } = useParams();

    return <div>User Profile: {userId}</div>;
}

export default UserProfile;

（四）使用 useHistory 和 useLocation Hooks

useHistory 和 useLocation 是 react-router-dom 提供的 Hooks，用于在函数组件中操作路由。

javascript 复制代码 
import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';

function MyComponent() {
    const history = useHistory();
    const location = useLocation();

    const handleClick = () => {
        history.push('/new-path');
    };

    return (
        <div>
            <p>Current Path: {location.pathname}</p>
            <button onClick={handleClick}>Go to New Path</button>
        </div>
    );
}

export default MyComponent;

（五）使用 withRouter 高阶组件

对于类组件，可以使用 withRouter 高阶组件，将路由相关的 props 注入到组件中。

javascript 复制代码 
import React from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
    handleClick = () => {
        this.props.history.push('/new-path');
    };

    render() {
        return (
            <div>
                <p>Current Path: {this.props.location.pathname}</p>
                <button onClick={this.handleClick}>Go to New Path</button>
            </div>
        );
    }
}

export default withRouter(MyComponent);

四、总结

React 路由是实现单页面应用导航的核心工具。通过使用 react-router-dom，可以轻松地实现页面导航、嵌套路由、动态路由参数等功能。合理组织路由结构、使用 Switch 组件、使用路由参数、使用 useHistory 和 useLocation Hooks 以及使用 withRouter 高阶组件，可以提升开发效率和代码可维护性。

希望本文能帮助你更好地理解和应用 React 路由。如果你有任何问题或建议，欢迎随时交流！

相关推荐
mldong2 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器：npm 装包，10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排2 小时前
什么是 RAG？如何用 RAG 实现一个用户记忆？
前端·后端·ai编程
passerby60613 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角4 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼！4 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰4 小时前
迷茫焦虑期，我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi6 小时前
Vue2 组件通讯（三）：全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen6 小时前
面试官问我：AI 都能写代码了，前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马7 小时前
AI源码分析：拆解模型底层实现逻辑
前端
IT_陈寒7 小时前
React子组件莫名其妙重渲染？你可能漏了这个Hook
前端·人工智能·后端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03历年考研数学一、数学二、数学三真题试卷及答案PDF04如何新建文件夹？ 电脑新建文件夹的4种方法05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08ZCode 周末送额度活动开启：3 亿 Token 免费领取09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路