第三十章 React的路由基本使用

这篇具有很好参考价值的文章主要介绍了第三十章 React的路由基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于React路由,我们在学习之前先了解一下其他知识点:SPA应用、路由的理解、react中如何使用路由。

SPA应用的理解

我们知道React脚手架给我们构建的是一个单页应用程序(SPA),在页面加载时,只会加载一个HTML文件,然后使用JavaScript动态地更新页面内容。这意味着您需要使用JavaScript来处理路由,以便在用户导航时更新页面内容,而不是通过传统的HTTP请求/响应循环加载新页面。

  • SPA全称:single page web application
  • 整个应用只有一个完整的页面
  • 点击页面中的路由链接不会刷新页面,只会做页面的局部更新
  • 数据都需要通过ajax请求获取, 并在前端异步展现

第三十章 React的路由基本使用

SPA的优点包括:

- 更快的页面加载速度,因为只需要加载一次HTML文件,之后只需要更新页面内容。
- 更好的用户体验,因为页面不会因为每次导航而重新加载。
- 更容易实现动态内容,因为可以使用JavaScript来更新页面内容。

SPA的缺点包括:

- 对SEO不友好,因为搜索引擎通常只会抓取初始HTML文件,而不会执行JavaScript来抓取动态内容。
- 对于较大的应用程序,可能会导致性能问题,因为需要加载大量的JavaScript代码。
- 对于不支持JavaScript的用户,可能无法访问应用程序。


路由的理解

1、什么是路由?

简单的说一个路由就是一对映射关系 (key: value), key为路径,value为function或者component

2、路由分类

  1. 后端路由:
  1. 理解: valuefunction, 用来处理客户端提交的请求。
  2. 注册路由: router.get(path, function(req, res))
  3. 工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
  1. 前端路由:
  1. 浏览器端路由,valuecomponent,用于展示页面内容。
  2. 注册路由: <Route path="/test" component={Test}>
  3. 工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件

React中如何使用路由

为了在React应用程序中实现路由,您可以使用React Router库。

React Router库通过使用浏览器的历史记录API来操作URL并根据当前URL呈现适当的组件来工作。当用户单击与定义的路由匹配的链接时,URL会更改并呈现相应的组件。React Router库提供了多种路由类型,包括BrowserRouterHashRouterMemoryRouter等。其中BrowserRouter使用HTML5history API来实现路由,HashRouter使用URLhash部分来实现路由,MemoryRouter则将路由信息存储在内存中。

在使用React Router时,您需要将路由器包装在应用程序的根组件中,并使用Route组件来定义每个路由。Route组件可以使用path属性来定义路由的路径,component属性来指定路由匹配时要呈现的组件。Switch组件用于包装Route组件,以确保只有一个路由匹配时才会呈现相应的组件。如果您需要在路由之间传递参数,可以使用URL参数或查询参数。URL参数是在路径中定义的参数,例如/users/:id,其中:id是一个参数。查询参数是在URL中以?开头的键值对,例如/users?id=123。您可以使用React Router提供的useParamsuseLocation钩子来访问这些参数。

编写案例

步骤一:安装React官方维护的路由依赖库

npm i react-router-dom --save

步骤二:编写组件Home

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return <h2>我是Home的内容</h2>
  }
}

步骤三:编写组件About

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return <h2>我是About的内容</h2>
  }
}

步骤四:编写组件App

import React, { Component } from 'react'
import Home from './components/Home'
import About from './components/About'
import {Link,Route} from 'react-router-dom'

export default class App extends Component {
  render() {
    return (
      <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-2 col-xs-offset-2">
        <div className="list-group">
          {/* <a className="list-group-item" href="./about.html">About</a>
          <a className="list-group-item active" href="./home.html">Home</a> */}
          <Link className='list-group-item' to='/home'>Home</Link>
          <Link className='list-group-item' to='/about'>About</Link>
          
        </div>
      </div>
      <div className="col-xs-6">
        <div className="panel">
          <div className="panel-body">
            <Route path="/home"component={Home} />
            <Route path="/about"component={About} />
          </div>
        </div>
      </div>
    </div>
  </div>
    )
  }
}

其中关键代码有三个部分:

关键代码1:

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

关键代码2:

<Link className='list-group-item' to='/home'>Home</Link>
<Link className='list-group-item' to='/about'>About</Link>

在React中靠路由链接通过组件Link实现切换组件–编写路由链接

关键代码3:

<Route path="/home"component={Home} />
<Route path="/about"component={About} />

通过组件Route实现路由注册

步骤五:编写入口文件index.js

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

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

这里的App组件被BrowserRouter包裹, 使得整个应用共用一个路由器。

查看效果:

第三十章 React的路由基本使用文章来源地址https://www.toymoban.com/news/detail-436740.html


总结

  • 明确好界面中的导航区、展示区
  • 导航区的a标签改为Link标签:<link to="/xxxx">Demo</Link>
  • 展示区写Route标签进行路径的匹配:<Route path='/xxxx' component={Demo}/>
  • <App/>的最外侧包裹一个<BrowserRouter>或者<HashRouter>

到了这里,关于第三十章 React的路由基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践

    单一数据源 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中; Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护; 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改; State是只读的 唯一修改State的方法

    2024年02月15日
    浏览(62)
  • 第十章 Python第三方库概览

    10.1 Python第三方库的获取和安装 Python第三方库依照安装方式灵活性和难易程度有三个方法: pip工具安装、自定义安装和文件安装 。 10.1.1 pip工具安装 最常用且最高效的Python第三方库安装方式是采用pip工具安装。pip是Python官方提供并维护的在线第三方库安装工具。 使用pip安装

    2024年02月07日
    浏览(58)
  • 算法训练第三十八天|动态规划理论基础、509. 斐波那契数 、70. 爬楼梯 、 746. 使用最小花费爬楼梯

    参考:https://programmercarl.com/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 动态规划是什么 动态规划,英文:Dynamic Programming,简称DP,如果某一问题有很多重叠子问题,使用动态规划是最有效的。 所以 动态规划中每一个状态一定是由上一个状态推导出来的 ,这一

    2024年02月04日
    浏览(40)
  • 第三十章 Unity角色控制器 Character Controller

    在我们之前的章节中,我们已经了解了碰撞体和刚体。但是,对于刚体这个组件来讲,有两种使用方式。其一就是用它来模拟现实世界的移动或碰撞效果(例如,门的开关);其二就是使用代码来控制物体移动或碰撞(例如,角色的行走)。两种方式使用场景不同而已。 本章

    2024年02月08日
    浏览(57)
  • 算法随想录第三十八天打卡| 理论基础 , 509. 斐波那契数, 70. 爬楼梯 , 746. 使用最小花费爬楼梯

     理论基础  无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。  如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了?  其实并没有,我讲的理论基础内容,在动规章节所有题目都有运用,所以很重要!   如果

    2024年01月18日
    浏览(46)
  • 《微服务实战》 第三十章 分布式事务框架seata TCC模式

    第三十章 分布式事务框架seata TCC模式 第二十九章 分布式事务框架seata AT模式 本章节介绍分布式事务框架seata TCC模式,上一章节介绍seata以及集成到Springboot、微服务框架里。 一个分布式的全局事务,整体是 两阶段提交 的模型。全局事务是由若干分支事务组成的,分支事务要

    2024年02月12日
    浏览(46)
  • 第三十章 控制到 XML 模式的映射 - Array of Classname

    本部分显示了从启用 XML 的类生成的 XML 架构的一部分,此时该类包含定义为类名数组的属性。例如,考虑以下属性定义: 如果此属性位于名为 Test.DemoArray1 的启用 XML 的类中,则该类的 XML 架构包含以下内容: 以下规则管理类型的名称: 对于 PropName 属性,相应的类型被命名

    2024年02月05日
    浏览(36)
  • 【正点原子STM32连载】第三十二章 DMA实验 摘自【正点原子】APM32E103最小系统板使用指南

    1)实验平台:正点原子APM32E103最小系统板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609294757420 3)全套实验源码+手册+视频下载地址: http://www.openedv.com/docs/boards/xiaoxitongban 本章介绍APM32E103直接存储访问(DMA)的使用,DMA能够在无CPU干预的情况下,实现外设与存储器或存储

    2024年02月22日
    浏览(57)
  • 【正点原子STM32连载】第三十一章 待机模式实验 摘自【正点原子】APM32E103最小系统板使用指南

    1)实验平台:正点原子APM32E103最小系统板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609294757420 3)全套实验源码+手册+视频下载地址: http://www.openedv.com/docs/boards/xiaoxitongban 本章介绍APM32E103低功耗模式中的待机模式,进入待机模式后,MCU内部的电压调压器将断开1.3V电源域

    2024年01月22日
    浏览(72)
  • 【正点原子STM32连载】第三十三章 待机模式实验 摘自【正点原子】APM32F407最小系统板使用指南

    1)实验平台:正点原子stm32f103战舰开发板V4 2)平台购买地址:https://detail.tmall.com/item.htm?id=609294757420 3)全套实验源码+手册+视频下载地址: http://www.openedv.com/thread-340252-1-1.html## 本章介绍APM32F407低功耗模式中的待机模式,进入待机模式后,MCU内部的电压调压器将断开1.3V电源域

    2024年02月07日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包