【React】详解 React Router

news2024/11/28 19:47:52

文章目录

    • 一、React Router 的基本概念
      • 1. 什么是 React Router？
      • 2. React Router 的主要特性
    • 二、React Router 的核心组件
      • 1. BrowserRouter
      • 2. Route
      • 3. Link
      • 4. Switch
    • 三、React Router 的使用方法
      • 1. 安装 React Router
      • 2. 定义路由组件
      • 3. 配置路由
      • 4. 启动应用
    • 四、React Router 的进阶应用
      • 1. 动态路由
      • 2. 嵌套路由
      • 3. 程序化导航
    • 五、React Router 的最佳实践
      • 1. 使用 Hooks
      • 2. 延迟加载组件

React Router 是一个用于 React 应用的路由库。它使得在单页应用（SPA）中能够实现多页面的导航，并且保留了浏览器的历史记录功能。通过 React Router，可以轻松地在不同的 URL 路径之间切换，从而创建具有多页面效果的单页应用。本文将深入探讨 React Router 的基本概念、核心组件、使用方法及其在实际项目中的应用。通过本文，你将全面了解 React Router 的工作机制，并掌握如何在 React 项目中有效地使用它。

一、React Router 的基本概念

1. 什么是 React Router？

React Router 是一个为 React 设计的路由库，用于在应用中实现页面导航。它允许你定义不同的 URL 路径，并根据这些路径渲染相应的组件，从而实现页面的切换。

2. React Router 的主要特性

  • 声明式路由：通过定义组件的方式来配置路由。
  • 嵌套路由：支持在父路由中嵌套定义子路由。
  • 动态路由：支持在 URL 中使用参数，从而实现动态路由匹配。
  • 程序化导航：允许通过代码控制路由跳转。
  • 浏览器历史记录：与浏览器的历史记录 API 集成，支持前进和后退操作。

二、React Router 的核心组件

React Router 提供了多个核心组件，用于实现不同的路由功能。理解这些组件的作用和相互关系是掌握 React Router 的关键。

1. BrowserRouter

BrowserRouter 是一个高阶组件，用于包裹整个应用，提供路由功能。它使用 HTML5 的 history API 来保持 UI 和 URL 的同步。

示例：使用 BrowserRouter 包裹应用

import { BrowserRouter } from 'react-router-dom';
import App from './App';

function Root() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

export default Root;

2. Route

Route 是用于定义路由规则的组件。它根据当前 URL 渲染对应的组件。每个 Route 组件都需要一个 path 属性，用于指定匹配的 URL 路径。

示例：定义基本路由

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

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

export default App;

3. Link

Link 组件用于创建导航链接，用户点击链接后，浏览器的 URL 会更新，同时应用渲染相应的组件。它类似于 HTML 中的 <a> 标签，但不会导致页面刷新。

示例：创建导航链接

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

4. Switch

Switch 组件用于包裹一组 Route 组件，一次仅渲染匹配的第一个路由。它确保了路由匹配的独占性，避免渲染多个路由组件。

示例：使用 Switch 包裹路由

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

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

export default App;

三、React Router 的使用方法

了解了 React Router 的基本概念和核心组件后，我们来看看 React Router 的实际使用方法。以下是一个简单的示例，演示如何在 React 应用中使用 React Router 实现多页面导航。

1. 安装 React Router

首先，我们需要安装 React Router 库。

npm install react-router-dom

2. 定义路由组件

创建几个示例组件，用于路由导航。

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

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

export default Home;

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

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

export default About;

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

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

export default Contact;

3. 配置路由

在主应用组件中配置路由规则，并使用 BrowserRouter 包裹整个应用。

// App.js
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <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 exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

4. 启动应用

启动应用，验证路由导航是否正常工作。

npm start

四、React Router 的进阶应用

1. 动态路由

React Router 支持在 URL 中使用参数，从而实现动态路由匹配。通过 :param 语法，可以在路由路径中定义参数。

示例：定义动态路由

import React from 'react';
import { BrowserRouter, Switch, Route, useParams } from 'react-router-dom';

function User() {
  let { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

2. 嵌套路由

React Router 支持在父路由中嵌套定义子路由。通过嵌套路由，可以实现复杂的页面结构。

示例：定义嵌套路由

import React from 'react';
import { BrowserRouter, Switch, Route, Link, useRouteMatch } from 'react-router-dom';

function Topics() {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li><Link to={`${url}/topic1`}>Topic 1</Link></li>
        <li><Link to={`${url}/topic2`}>Topic 2</Link></li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  let { topicId } = useParams();
  return <h3>Selected Topic ID: {topicId}</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/topics">Topics</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/topics" component={Topics} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

3. 程序化导航

除了使用 Link 组件创建导航链接外，React Router 还支持通过代码控制路由跳转。使用 useHistory 钩子可以实现程序化导航。

示例：实现程序化导航

import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  let history = useHistory();

  function handleClick() {
    history.push('/about');
  }

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

五、React Router 的最佳实践

1. 使用 Hooks

React Router 提供了多个 hooks（如 useParams、useRouteMatch 和 useHistory）来简化路由相关的操作。尽量使用 hooks 来替代类组件中的相关方法。

2. 延迟加载组件

对于大型应用，可以使用 React 的 lazy 和 Suspense 组件来实现路由组件的延迟加载，从而提高应用性能。

示例：实现延迟加载组件

import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1961257.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

再谈istio

再谈istio

微服务之间调用观测&#xff0c; istio的版本是对k8s 版本有要求的&#xff0c;案例中 istioshi 1.15.2 版本的 一、下载 Istio 二、部署 egressgateway 和 ingressgateway 分别控制进出 istio 通过 Envoy proxy&#xff0c;也就是pod加边车的方式来控制用户对svc的访问 这样…
阅读更多...
Spring验证码

Spring验证码

前言&#xff1a;使用Hutool 1.什么是Hutool&#xff1f; 2.代码复制到test类中 3.代码爆红&#xff0c;说明需要引入依赖 4.根据名取Maven仓库相关依赖 5.在pom.xml文件中进行配置 6.引入成功 7. 运行程序 打开d盘&#xff0c;发现已经生成了验证码的图片&#xff0c;路径在…
阅读更多...
Python推荐书单：三本不可错过的经典书籍

Python推荐书单：三本不可错过的经典书籍

强烈推荐这三本书&#xff01;&#xff01; 一、《Python编程从入门到实践》 这本书适合零基础的Python读者&#xff0c;旨在帮助他们快速入门Python编程&#xff0c;并达到初级开发者的水平。书中深入浅出地介绍了Python的基础概念&#xff0c;如变量、循环、函数等&#xff…
阅读更多...
智能优化算法（三）：遗传算法

智能优化算法（三）：遗传算法

文章目录 1.问题描述2.遗传算法2.1.算法概述2.2.编码操作2.3.选择操作2.4.交叉操作2.5.变异操作2.6.算法流程 3.算法实现3.1.MATLAB代码实现3.2.Python代码实现 4.参考文献 1.问题描述 \quad 在利用启发式算法求解问题时&#xff0c;我们常常需要应用遗传算法解决函数最值问题&…
阅读更多...
【Golang 面试 - 进阶题】每日 3 题（八）

【Golang 面试 - 进阶题】每日 3 题（八）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…
阅读更多...
重塑七人拼团模式：社交电商的裂变新策略

重塑七人拼团模式：社交电商的裂变新策略

在当今的电商领域&#xff0c;七人拼团模式作为一种创新的商业模式&#xff0c;正以其独特的魅力引领着中小型企业迈向新的增长阶段。这一模式巧妙融合了社交电商的互动性与拼购的趣味性&#xff0c;旨在通过用户间的自然传播&#xff0c;实现市场的快速渗透与品牌影响力的显著…
阅读更多...
【赛事推荐】2024中国高校计算机大赛人工智能创意赛

【赛事推荐】2024中国高校计算机大赛人工智能创意赛

“中国高校计算机大赛”&#xff08;China Collegiate Computing Contest&#xff0c;简称C4&#xff09;是面向全国高校各专业在校学生的科技类竞赛活动&#xff0c;于2016年由教育部高等学校计算机类专业教学指导委员会、教育部高等学校大学软件工程专业教学指导委员会、教育…
阅读更多...
NSS [SWPUCTF 2022 新生赛]funny_php

NSS [SWPUCTF 2022 新生赛]funny_php

NSS [SWPUCTF 2022 新生赛]funny_php 开题&#xff0c;直接给了源码 <?phpsession_start();highlight_file(__FILE__);if(isset($_GET[num])){if(strlen($_GET[num])<3&&$_GET[num]>999999999){echo ":D";$_SESSION[L1] 1;}else{echo ":C&…
阅读更多...
Express基于Node.js基础知识【1】全面总结 推荐收藏

Express基于Node.js基础知识【1】全面总结 推荐收藏

最近在用基于node.js平台的web应用开发做项目&#xff0c;梳理了下关于Express框架的相关知识&#xff0c;方便自己以后查看&#xff0c;希望也能帮助证字啊学习express相关知识的同学&#xff0c;欢迎大家参考&#xff0c;有问题评论区留言&#xff0c;谢谢。 目录 1.安装 …
阅读更多...
【人工智能】基础三：深度学习概述、人工神经网络基础

【人工智能】基础三：深度学习概述、人工神经网络基础

文章目录 一. 深度学习1. 深度学习概念2. 深度学习原理3. 深度学习学习方式4. 深度学习训练方法 二. 人工神经网络基础1. 神经元感知器模型2. 神经网络模型2. 学习方式3. 学习规则3.1. 正向传播求误差3.2. 反向传播求偏导&#xff08;ing&#xff09; 4. 激活函数 一. 深度学习…
阅读更多...
【环境搭建问题】linux服务器安装conda并创建虚拟环境

【环境搭建问题】linux服务器安装conda并创建虚拟环境

1.检查有没有conda 首先看root文件夹下有没有anaconda或者conda 没有的话就要先下载安装conda&#xff1a; https://repo.anaconda.com/archive/index.html 在这个链接下找自己需要的。服务器一般为linux&#xff0c;所以我这里选择的是&#xff1a; 2.安装conda 下载安装…
阅读更多...
阳光混合试验的三个指标

阳光混合试验的三个指标

户外干燥气候循环系统&#xff08;仿真模拟空气干燥气侯&#xff09;户外湿冷气侯循环系统&#xff08;仿真模拟寒湿和冰冷晚间气侯&#xff09;室内干燥气候耐久度 阳光模拟温湿度试验箱 主要用于汽车及零部件的曝晒试验、如塑料样板、仪表盘、中控屏、方向盘、保险杠等&…
阅读更多...
基于 GADF+Swin-CNN-GAM 的高创新电能扰动信号识别模型！

基于 GADF+Swin-CNN-GAM 的高创新电能扰动信号识别模型！

往期精彩内容&#xff1a; 电能质量扰动信号数据介绍与分类-Python实现-CSDN博客 Python电能质量扰动信号分类(一)基于LSTM模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(三)基于Transformer…
阅读更多...
【计算机毕设论文】基于SpringBoot的诗词管理系统

【计算机毕设论文】基于SpringBoot的诗词管理系统

&#x1f497;博主介绍&#xff1a;✌全平台粉丝5W,高级大厂开发程序员&#x1f603;&#xff0c;博客之星、掘金/知乎/华为云/阿里云等平台优质作者。 【源码获取】小伙伴可以关注我 感兴趣的可以先收藏起来&#xff0c;同学门有不懂的毕设选题&#xff0c;项目以及论文编写等…
阅读更多...
轻松入门Linux—CentOS,直接拿捏 —/— ＜1＞

轻松入门Linux—CentOS,直接拿捏 —/— ＜1＞

一、什么是Linux Linux是一个开源的操作系统&#xff0c;目前是市面上占有率极高的服务器操作系统&#xff0c;目前其分支有很多。是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统 Linux能运行主要的UNIX工具软件、应用程序和网络协议 Linux支持 32…
阅读更多...
小程序开发_05协同工作和发布

小程序开发_05协同工作和发布

一、开发流程 二、权限管理 三、不同成员的权限 四、小程序发布上线的步骤 上传代码--->提交审核-->发布1. 上传代码 提交审核 三、发布上线
阅读更多...
文件IO相关作业

文件IO相关作业

1> 使用文件IO完成&#xff0c;将源文件中的所有内容进行加密&#xff08;大写转小写、小写转大写&#xff09;后写入目标文件中 源文件内容不变 #include<myhead.h>int main(int argc, const char *argv[]) {//判断传入的是否是两个文件if(argc!3){write(2,"inp…
阅读更多...
期末复习资料——计算机系统基础

期末复习资料——计算机系统基础

第一章 1、下列关于机器字长、指令字长和存储字长的说法中&#xff0c;正确的时_②、③_ ①三者在数值上总是相等的。②三者在数值上可能不相等。③存储字长是存放在一个存储单元中的二进制代码位数。④数据字长就是MDR的位数。 机器字长、指令字长和存储字长&#xff0c;三…
阅读更多...
【区块链+绿色低碳】碳低链 | FISCO BCOS应用案例

【区块链+绿色低碳】碳低链 | FISCO BCOS应用案例

在碳中和、碳达峰国家战略的号召下&#xff0c;碳中和数字化、协同低碳的发展如火如荼。但是在金融业的实际场景应用中&#xff0c; 存在数据收集效率低、数据核查困难、服务单一等问题&#xff0c;痛点集中为两个&#xff1a;一是数据冗杂&#xff0c;可能会存在数据篡改&…
阅读更多...
【python报错已解决】`AttributeError: ‘DataFrame‘ object has no attribute ‘ix‘`

【python报错已解决】`AttributeError: ‘DataFrame‘ object has no attribute ‘ix‘`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言&#xff1a; 在数据分析或者数据处理的过程中&#xff0c;我们经常会遇到各种各样的报错信息&#xff0c;这些报错信息往…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023