当前位置: 首页 > news >正文

React(8)

千锋学习视频https://www.bilibili.com/video/BV1dP4y1c7qd?p=72&spm_id_from=pageDriver&vd_source=f07a5c4baae42e64ab4bebdd9f3cd1b3

1.React 路由

1.1 什么是路由?

        路由是根据不同的 url 地址展示不同的内容或页面。 

        一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。

1.2 路由安装

npm i react-router-dom@5

1.3 路由使用

import React, { Component } from 'react'
import {HashRouter,Route} from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class componentName extends Component {render() {return (<div><HashRouter>  <Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route></HashRouter> </div>)}
}

  <HashRouter> 会让路径带上一个/#

也可以把路由封装成一个组件抽离出去


import React, { Component } from 'react'import MyRouter from './MyRouter'
// import Film from './views/Film'
// import Cinemas from './views/Cinemas'
// import Center from './views/Center'export default class componentName extends Component {render() {return (<div>{/* <HashRouter>  也可以把路由封装成一个组件抽离出去<Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route></HashRouter> */}<MyRouter></MyRouter></div>)}
}


import React, { Component } from 'react'
import {HashRouter,Route} from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class MyRouter extends Component {render() {return (<div><HashRouter>  <Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route></HashRouter></div>)}
}

1.4 路由重定向

如果没有匹配的路径,需要跳转到指定的路径  使用<Redirect  from=""  to="" />


import React, { Component } from 'react'
import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class MyRouter extends Component {render() {return (<div><HashRouter>  <Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route>{/* 匹配/路径的时候 模糊匹配  跳转到/films */}<Redirect from="/" to="/films"></Redirect></HashRouter></div>)}
}

 但是这个做法存在问题:当输入http://localhost:3000/#/center 会跳到center 但再次刷新又会跳到/films 

改进:使用Switch   匹配一次后将不再继续匹配


import React, { Component } from 'react'
import { HashRouter, Route, Redirect, Switch } from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class MyRouter extends Component {render() {return (<div><HashRouter><Switch><Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route>{/* 匹配/路径的时候  跳转到/films */}<Redirect from="/" to="/films"></Redirect></Switch></HashRouter></div>)}
}

精准匹配exact

场景:/ 跳转到/films  其他不匹配上述路由的跳转到404


import React, { Component } from 'react'
import { HashRouter, Route, Redirect, Switch } from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'
import NotFound from './views/NotFound'export default class MyRouter extends Component {render() {return (<div><HashRouter><Switch><Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route>{/* 匹配/路径的时候  跳转到/films */}<Redirect from="/" to="/films" exact></Redirect><Route component={NotFound}></Route></Switch></HashRouter></div>)}
}

import React, { Component } from 'react'export default class NotFound extends Component {render() {return (<div>404 Not Found</div>)}
}

注意:exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用)

1.5 嵌套路由

MyRouter组件中的路由保持不变   当/film模糊匹配到后会进入Film组件

以下代码在Film组件中写即可

<Switch><Route path="/films/nowplaying" component={Nowplaying}/><Route path="/films/comingsoon" component={Comingsoon}/><Redirect from="/films" to="/films/nowplaying"/>
</Switch>

1.6 路由跳转方式

1.声明式导航

 

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'export default class Navbar extends Component {render() {return (<div><li><NavLink to="/films">电影</NavLink></li><li><NavLink to="/cinemas">影院</NavLink></li><li><NavLink to="/center">我的</NavLink></li></div>)}
}

意思是可以监听到地址  如果是/center会给我的这个a标签给加上class="active"的属性,

也可以自定义属性,方便设置css高亮显示

  <li><NavLink to="/films" activeClassName="Navbaractive">电影</NavLink></li><li><NavLink to="/cinemas" activeClassName="Navbaractive">影院</NavLink></li><li><NavLink to="/center" activeClassName="Navbaractive">我的</NavLink></li>

2.编程式导航

this.props.history.push(`/center`)

或者导入useHistory

import {useHistory} from 'react-router-dom'const history =useHistory()history.push(`/detail`)

 

相关文章:

React(8)

千锋学习视频https://www.bilibili.com/video/BV1dP4y1c7qd?p72&spm_id_frompageDriver&vd_sourcef07a5c4baae42e64ab4bebdd9f3cd1b3 1.React 路由 1.1 什么是路由&#xff1f; 路由是根据不同的 url 地址展示不同的内容或页面。 一个针对React而设计的路由解决方案…...

ssm社区管理与服务系统源码和论文

ssm社区管理与服务的设计与实现031 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 研究背景 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理&#xff0c;这正是计算机被广泛应用于信息管理系统的…...

Git多版本并行开发实践

本文目的&#xff1a; 实现多个项目同时进行的git多版本管理工作流。 名词解释&#xff1a; feature-XXXX&#xff1a;特性分支指CCS中一个项目或者一个迭代&#xff0c;在该分支上开发&#xff0c;完成后&#xff0c;合并&#xff0c;最后&#xff0c;删除该分支&#xff0c;…...

修复hive重命名分区后新分区为0的问题

hive分区重命名后&#xff0c;新的分区的分区大小为0 , 例如 alter table entersv.ods_t_test partition(dt2022-11-08) rename to partition(dt2022-11-21) ods_t_test 的2022-11-21分区大小为0。怎样修复 使用 msck repair table 命令来修复表的元数据&#xff0c;让hive重新…...

Gin+微服务实现抖音视频上传到七牛云

文章目录 安装获取凭证Gin处理微服务处理 如果你对Gin和微服务有一定了解&#xff0c;看本文较容易。 安装 执行命令&#xff1a; go get github.com/qiniu/go-sdk/v7获取凭证 Go SDK 的所有的功能&#xff0c;都需要合法的授权。授权凭证的签算需要七牛账号下的一对有效的A…...

go 连接操作MySQL

连接Mysql 访问此网站搜索MySQL第一个就是按照指引运行 go get -u github.com\go-sql-driver\mysql导入包建立连接 package mainimport ("database/sql""fmt""time"_ "github.com/go-sql-driver/mysql" )var db *sql.DBfunc initdb…...

git常见的命令,问题和处理方式

Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同&#xff0c;它采用了分布式版本库的方…...

Ubuntu环境下超好用的文件对比工具软件meld

Ubuntu环境下超好用的文件对比工具软件_ubuntu 代码比较工具_Calculation K的博客-CSDN博客...

Channel是什么?FileChannel类的常用方法

Channel 是一个接口对象,它类似于传统的流对象,但与传统的流对象又有些不同&#xff0c;具体表现如下: • Channel可以异步地执行I/O读写操作。 • Channel的读写操作是双向的,既可以从 Channel中读取数据,又可以写数据到Channel,而流的读写操作通常都是单向的。 • Channel…...

Python爬虫——scrapy_读书网数据入库和链接跟进

数据入库 先创建一个数据库 create table book(id int primary key auto_increment,name varchar(128),src varchar(128));settings.py DB_HOST 169.254.38.183 # 端口号是一个整数 DB_PORT 3306 DB_USER root DB_PASSWORD 123456 # 数据库名称 DB_NAME spider01 DB_CHA…...

前端常用linux命令

前端开发也需要掌握一些常用的linux命令&#xff0c;以便在linux系统上做一些操作如nginx代理配置&#xff0c;项目解压发布等 1、cd 切换目录 cd / //切换到根目录 cd directory_path //切换到directory_path目录 cd ../ //切换到上一级目录2、ls 列出目录内容 ls3…...

制作高质量SVG的最佳工具,这些编辑软件你需要知道!

作为前端开发者&#xff0c;想要学习更高级的可视化技术&#xff0c;SVG 编辑工具是必学的。与其他图像格式相比&#xff0c;SVG 图像可任意缩放而不损失质量&#xff0c;还可以实现交互动画效果&#xff0c;一个好的 SVG 编辑器能大大简化你的学习过程。下面就跟随小编一起看看…...

四、MySQL性能优化

1、SQL性能优化 1、如何分析SQL的性能&#xff1f; 我们可以使用EXPLAIN命令来分析SQL的执行计划 &#xff0c;执行计划是指一条SQL语句在经过MySQL查询优化器的选择后具体的执行方式 EXPLAIN并不会真的去执行相关的语句&#xff0c;而是通过查询优化器 对语句进行分析&…...

Oracle Database12c数据库官网下载和安装教程

文章目录 下载安装Oracle自带的客户端工具使用 下载 进入oracle官网 点击下载连接之后右上角会有一个下载 我们只需要数据库本体就够了 运行这个下载器 等待下好之后即可 出现 Complete 之后代表下载成功&#xff0c;然后我们解压即可 安装 双击 双击setup.exe 根据…...

spring依赖注入详解(下)

Autowired注解依赖注入过程 一、findAutowireCandidates()实现 找出BeanFactory中类型为type的所有的Bean的名字&#xff0c;注意是名字&#xff0c;而不是Bean对象&#xff0c;因为我们可以根据BeanDefinition就能判断和当前type是不是匹配&#xff0c;不用生成Bean对象把re…...

python的dataframe常用处理方法

import pandas as pdclass DataFrameProcessor:staticmethoddef sort_by_column(df, by_column, ascendingTrue):"""根据指定列对DataFrame进行排序。Parameters:df (pd.DataFrame): 要排序的DataFrame。by_column (str): 要排序的列名。ascending (bool): True…...

k8s 自身原理之高可用

说到高可用&#xff0c;咱们在使用主机环境的时候&#xff08;非 k8s&#xff09;&#xff0c;咱做高可用有使用过这样的方式&#xff1a; 服务器做主备部署&#xff0c;当主节点和备节点同时存活的时候&#xff0c;只有主节点对外提供服务&#xff0c;备节点就等着主节点挂了…...

游乐场vr设备虚拟游乐园vr项目沉浸体验馆

在景区建设一个VR游乐场项目可以为游客提供一种新颖、刺激和沉浸式的游乐体验。提高游客的体验类型&#xff0c;以及景区的类目&#xff0c;从而可以吸引更多的人来体验。 1、市场调研&#xff1a;在决定建设VR游乐场项目之前&#xff0c;需要进行市场调研&#xff0c;了解当地…...

window10安装并使用oracle

1、现在oracle19c或者21c&#xff0c;下载链接如下 Database Software Downloads | Oracle 中国 2、安装好之后&#xff0c; 2.1PL/SQL连接方式 命令窗口输入sqlplus conn as sysdba 2.2DBeaver连接 输入IP、 端口默认1521 数据库默认是ORCL 用户名是system 角色是N…...

[Mac软件]AutoCAD 2024 for Mac(cad2024) v2024.3.61.182中文版支持M1/M2/intel

下载地址&#xff1a;前往黑果魏叔官网 AutoCAD是一款计算机辅助设计&#xff08;CAD&#xff09;软件&#xff0c;目前已经成为全球最受欢迎的CAD软件之一。它可以在二维和三维空间中创建精确的技术绘图&#xff0c;并且可以应用于各种行业&#xff0c;如建筑、土木工程、机械…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...