react 路由详细讲解(1)

最新推荐文章于 2023-11-17 16:15:04 发布
最新推荐文章于 2023-11-17 16:15:04 发布
阅读量790 收藏
点赞数 3
分类专栏： 前端开发 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_y_f_/article/details/119255743
版权

介绍:

今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦

SPA介绍:

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

优缺点

单页Web程序的出现是富客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。

优点：

  1. 良好的交互体验

  2. 良好的前后端工作分离模式

  3. 减轻服务器压力

  4. 共用一套后端程序代码

缺点：

  1. SEO难度较高

  2. 前进、后退管理

  3. 初次加载耗时多

路由的理解

① 什么是路由?

当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个 JavaScript 重新执行，丢失状态。

安装

npm i -S react-router-dom

② 路由分类

  1. 后端路由

理解： value是function, 用来处理客户端提交的请求。

注册路由： router.get(path, function(req, res))

工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

  1. 前端路由
    浏览器端路由，value是component，用于展示页面内容。

注册路由:

工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

react-router-dom

安装命令

 cnpm install react-router-dom -S
 npm install react-router-dom -S

下载到生产环境的依赖中。

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；

Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
Link表示一个路由的链接，属性to

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

路由的基本使用

  1. 明确好界面中的导航区、展示区

  2. 导航区的a标签改为Link标签

<Link to="/xxxxx">Demo</Link>
  1. 展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={
   Demo}/>

  1.  <App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

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

  1. 路由组件与一般组件

  2. 写法不同：

​ 一般组件：

​ 路由组件：

  1. 存放位置不同：

​ 一般组件：components

​ 路由组件：pages

接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么

路由组件：接收到三个固定的属性

//路由属性打印结果展示

history:
	go: ƒ go(n)
	goBack: ƒ goBack()
	goForward: ƒ goForward()
	push: ƒ push(path, state)
	replace: ƒ replace(path, state)
location:
    pathname: "/about"
	search: ""
	state: undefined
	match:
params: { }
	path: "/about"
	url: "/about"
  1. NavLink使用与封装

NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

  1. Switch的使用

1.通常情况下，path和component是一一对应的关系。

2.Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配

6、解决多级路径刷新页面样式丢失的问题

  1. public/index.html 中 引入样式时不写 ./ 写 / （常用）

  2. public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用,但只在react中有效果）

  3. 使用HashRouter (不常用)

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8" />
  	<title>react脚手架</title>
       <!-- 方法二 -->
  	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
         <!-- 方法一 -->
  	<link rel="stylesheet" href=
最低0.47元/天 解锁文章
地中海真帅
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React路由
m0_62118859的博客
05-02 810
目录 1. React路由-基本使用 2. React路由-Router模式 3. React路由-Link&NavLink组件 4. React路由-Route组件 5. React路由-路由匹配模式 模糊匹配 精确匹配 6. React路由-执行过程 7. React路由-Switch组件&404页面 8. React路由-编程式导航 1. React路由-基本使用 能够使用 react 路由切换页面 内容： 2021.11月初，react-r...
this.props.location.state刷新为undefined
zm_miner的博客
04-01 6020
a页面跳转到b页面, 通过state传参 a页面 this.props.history.push({ pathname: `/chunan-my-declare-detail`, state: { record, takenCount: record.takenCount, takenTicketTime: record.t...
React Router location里还有location
majixiang1996的博客
02-10 1855
问题描述： 今天在项目使用React Router遇到了一个很奇怪的现象，代码大概是这样的： import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import {Router, Route, Switch, Redirect, Link} from "react-router-dom"; import history from "./app/history"; import Monitor fr
【react+ts】react项目中this.props找不到location方法
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 2055
问题描述 我想想在react+ts项目中获取本地信息，所以就是用了this.props.location.pathname但是报错说找不到location，我特喵的就很纳闷 解决流程 1.先使用react-router-dom中的withRouter函数包住当前类组件 import {withRouter} from "react-router-dom"; class ReservationList extends Component<InitProps, InitState>{ render
如何替换react router 中location 的state
最新发布
u011561536的专栏
11-17 330
到了6.0的hook时代，
React全家桶PDF讲解
11-01
1. 虚拟DOM：React使用虚拟DOM作为内存中的表示，当组件状态变化时，虚拟DOM会进行高效的比对，只更新实际DOM中发生变化的部分。 2. JSX语法：JSX是一种在JavaScript中嵌入XML的语法扩展，使得在JavaScript中编写...
react 基础 分章节讲解！
06-28
在React应用中实现路由管理，学习如何使用`react-router-dom`库来创建和管理页面路由，实现页面之间的跳转。 ### 十二章：优化与最佳实践 讨论React性能优化技巧，如应该何时使用PureComponent、...
react router 4.0以上的路由应用详解
08-29
这篇文章将详细讲解这些变化，以及如何正确地在你的应用中使用React Router 4.x。 在React Router 4.x之前，你可以将嵌套的路由直接放在`<Route>`标签内部，如下所示： ```jsx ``` 然而，在4.x版本中，...
react-router-dom 嵌套路由的实现
10-15
`react-router-dom`是React路由库`react-router`的一个分支，专门用于浏览器环境。本文将详细讲解如何使用`react-router-dom`实现嵌套路由。 首先，我们需要安装`react-router-dom`库，可以通过npm或yarn进行安装：...
React全家桶从入门到进阶详细讲解
05-22
React Native 编写原生应用、高效（优秀的Diffing算法）、虚拟DOM与真实DOM、1.3.React JSX、面向组件编程、refs与事件处理、组件的生命周期、...、React ajax、React路由、React UI组件库、redux、纯函数和高阶函数
redux-location-state:用于在URL中读取和写入Redux存储状态的实用程序
05-17
还原位置状态 用于在URL中读取和写入Redux存储状态的实用程序。 有关此程序包存在的用例和原因，请阅读博客文章： : 发展状况 2.0已更新以发布React Router V4 这个怎么运作 在撰写之前进行设置 基本思想是，您传递一个配置对象，并根据状态何时更新来执行某些查询参数，并且如果用户返回或前进，则根据查询参数来更新状态。 例如 { p : { stateKey : 'foo' , initialState : 'bazz' , options : { shouldPush : true } } , } 将使p的查询参数等于通过foo上的值传递的状态 配置 首先，您需要创建一个配置对象 const paramSetup = { '/' : { p : { stateKey : 'foo' , initialState : 'bazz' , op
React router(V6)随手笔记.二
fang_my的博客
04-06 962
一 .换成自己独有的地址栏信息 在地址栏里我们经常可以看到公司的名称或者当前页面的大概内容，其实我们也可以修改地址栏里的路径信息，很简单，在<Link>标签里的to属性里设置就可以 二.需要注意的点 我们需要注意的是，webpack会把react脚手架下名字叫做public的文件夹当成根目录，也就是说localhost:3000 其实就是public这个文件夹，（你可以暂时这样理解） 我这里在public文件夹下写了一个样式。简单的就是body{background-color:gree
React初级教学
LoveZJC96的博客
03-28 1373
1.什么是React React 是一个用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。所以React是用组件搭建页面 2.JSX 语法 JSX 它是一种JavaScript语法扩展，可以将HTML 语言直接写在 JavaScript 语言之中，不加任何引号。 单标签使用/>来闭合标签 如： const element = <h1>Hello, world!</h..
风尚学React--路由安装及路由props了解篇
01-05 865
风尚学React--路由安装及路由props了解篇
使用react路由传递过来的state如何清除
Kang Hao‘s Blog
05-20 4401
当我们使用react需要从一个组件传参到另一个组件的时候，会有params，search，state三种实现方式； 实际需求: 从一个组件传递到另一个组件，并且不在url中显示传递的数据 依据项目中实际需求，选择state方式进行参数传递： <Link to={{ pathname: "/path", state: {paramName: paramValue}}}> 在另一个组件中接收到参数 let {paramName} = this.props.location.st...
React Router 页面传值的四种方法
QTFYING的博客
09-11 3万+
注：本文示例React Router版本为：3.0.2，使用前请注意检查版本 一. props.params官方例子使用 React router 定义路由时，我们可以给&lt;Route&gt;指定一个 path，然后指定通配符可以携带参数到指定的 path： 首先定义路由到 UserPage 页面:import { Router,Route,hashHistory} from 'react-...
react-router-dom 通过Link传值的坑人表现!
cen_cs的专栏
11-02 9200
react-router-dom 通过Link传值的坑人表现! link 可以通过以下方式传递到下一个路由:   &lt;Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/&gt;   在下一个页面可以这...
react如何在组件中获取路由参数？this.props.params.id
热门推荐
沈斯明技术博客
12-06 4万+
路由参数 假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？ 这种场景就需要用到路由的参数功能，增加一条包含参数的路由配置。 import List from './component/list'; Route path="list/:id" component={List} /> 注意 path 属性中的 :i
React Router 使用教程
weixin_33828101的博客
06-07 215
真正学会 React 是一个漫长的过程。 你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。 举例来说，React 不使用 HTML，而使用 JSX 。它打算抛弃 DOM，要求开发者不要使用任何 DOM 方法。它甚至还抛弃了 SQL ，自己发明了一...
React实战开发课程大纲
路由部分，教程围绕react-router-dom展开，讲解了React Router的基本用法、路由参数传递、子路由和路由认证，以及通过withRouter实现子组件间的路由跳转。 在状态管理方面，教程介绍了Redux，讲解了Redux的安装和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值