react之路由的安装与使用

一、路由安装

  • 路由官网
  • 2021.11月初,react-router 更新到 v6 版本。
  • 使用最广泛的 v5 版本的使用
npm i react-router-dom@5.3.0

二、路由使用

2.1 路由的简单使用

第一步 在根目录下 创建 views 文件夹 ,用于放置路由页面

在这里插入图片描述

  • films.js示例代码
export default function Films() {return <div>films</div>
}

第二步 在根目录下 创建router文件夹,并新建indexRouter.js文件 用来管理路由

  • indexRouter.js 页面示例代码
//1.引入 hashrouter
import { HashRouter, Route } from 'react-router-dom'import { Component } from 'react'//2.引入组件
import Films from '../views/films'
import Cinemas from '../views/cinemas'
import Center from '../views/center'
export default class IndexRouter extends Component {render() {return (//3 使用<HashRouter><Route path="/films" component={Films}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/center" component={Center}></Route></HashRouter>)}
}

第三步 在App.js中 引入indexRouter

  • App.js中示例代码
import IndexRouter from './router/indexRouter'
export default function App() {return (<div><IndexRouter></IndexRouter></div>)
}

第四步 在入口文件index.js中渲染页面

  • index.js示例代码
import React from 'react'import ReactDom from 'react-dom/client'import App from './App.js'ReactDom.createRoot(document.querySelector('#root')).render(<App></App>)

2.2 路由的重定向

第一步 引入Redirect

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

第二步 使用 (模糊匹配)

  • 默认模糊匹配
export default class IndexRouter extends Component {render() {return (//3 使用<HashRouter><Route path="/films" component={Films}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/center" component={Center}></Route>{/* 路由的重定向  模糊匹配*/}<Redirect from="/" to="/films"></Redirect></HashRouter>)}
}

2.3 路由Switch组件与404页面

Switch组件

  • 包裹 Route 组件,只会渲染第一个匹配的组件,即使有多个路由都可以匹配成功

    • 在实际开发时,通常会用 Switch 组件包裹 Route 组件
    • 通过 Switch 组件非常容易的就能实现 404 页面功能
  • 需引入

import { HashRouter, Route, Redirect, Switch } from 'react-router-dom'//switch 包裹router标签<Switch><Route path="/films" component={Films}></Route>....中间省略....{/* 404页面 */}<Route component={NotFound}></Route></Switch>

404 页面实现

  • 1.views目录下新建notFound.js
  • 2.路由indexRouter.js中引入
import NotFound from '../views/notFound'
  • 3.使用
<HashRouter>
<Switch><Route path="/films" component={Films}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/center" component={Center}></Route>{/* 路由重定向 精确匹配 exact 必须外边用Switch标签包裹	 */}<Redirect from="/" to="/films" exact></Redirect>{/* 404页面 */}<Route component={NotFound}></Route>
</Switch>

2.4 路由嵌套

  • 必须一级路由是模糊匹配!!!
  • 1.新建二级路由页面,并在一级路由页面引入
  • 2.一级路由页面配置路由信息
  • 一级路由示例代码
//引入switch route
import { Switch, Route, Redirect } from 'react-router-dom'//引入
import One from './films/one'
import Two from './films/two'
export default function Films() {return (<div>films<Switch><Route path="/films/one" component={One}></Route><Route path="/films/two" component={Two}></Route>{/* 重定向 */}<Redirect from="/films" to="/films/one"></Redirect></Switch></div>)
}

2.5 声明式导航与编程式导航

2.5.1 声明式导航

通过 a链接 进行跳转

//需加 #<a href="#/center">我的</a>

通过NavLink 进行跳转

//1.引入
import { NavLink } from 'react-router-dom'....<NavLink to="/center">我的</NavLink>

2.5.2 编程式导航

核心代码

import axios from 'axios'
import { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
export default function Tabbar(props) {console.log('打印props', props)let history = useHistory() //将useHistory()钩子赋值给history方便使用const [list, setList] = useState([])useEffect(() => {axios.get('http://localhost:3000/data.json').then((res) => {console.log('接口请求成功', res)setList(res.data.tabs)}).catch((err) => {console.log('接口请求失败', err)})}, [])const toDetails = (id) => {console.log('编程式导航', id)// 原生js 跳转// window.location.href = 'http://localhost:3000/#/cinemas'history.push(`/detail/${id}`)}return (<><h1>编程式导航</h1><ul>{list.map((item, index) => (<li key={item.id} onClick={() => toDetails(item.id)}>{item.name}</li>))}</ul></>)
}

2.6 路由传参

2.6.1 动态路由传参

核心代码

  • 传递参数页面
import axios from 'axios'
import { useState, useEffect } from 'react'
import { NavLink, useHistory } from 'react-router-dom'
export default function Tabbar(props) {console.log('打印props', props)let history = useHistory() //将useHistory()钩子赋值给history方便使用const [list, setList] = useState([])useEffect(() => {axios.get('http://localhost:3000/data.json').then((res) => {console.log('接口请求成功', res)setList(res.data.tabs)}).catch((err) => {console.log('接口请求失败', err)})}, [])const toDetails = (id) => {//1.history.push跳转传参history.push(`/detail/${id}`)}return (<><ul>{list.map((item, index) => (<li key={item.id} onClick={() => toDetails(item.id)}>{item.name}</li>))}</ul></>)
}
  • 路由页面
{/* 详情 :myid接参占位 */}
{/* history.push跳转传参 */}
<Route path="/detail/:myid" component={Detail}></Route>
  • 接参页面
export default function Detail(props) {// history.push跳转传参console.log('详情', props.match.params.myid)return <div>详情页面</div>
}

2.6.2 state传参

  • 传递参数页面
import axios from 'axios'
import { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
export default function Tabbar(props) {console.log('打印props', props)let history = useHistory() //将useHistory()钩子赋值给history方便使用const [list, setList] = useState([])useEffect(() => {axios.get('http://localhost:3000/data.json').then((res) => {console.log('接口请求成功', res)setList(res.data.tabs)}).catch((err) => {console.log('接口请求失败', err)})}, [])const toDetails = (id) => {//state传参history.push({ pathname: '/detail', state: { myid: id } })}return (<><ul>{list.map((item, index) => (<li key={item.id} onClick={() => toDetails(item.id)}>{item.name}</li>))}</ul></>)
}
  • 路由配置
<Route path="/detail" component={Detail}></Route>
  • 接参页面
export default function Detail(props) {//第二种传参console.log('第二种传参', props.location.state.myid)return <div>详情页面</div>

2.7 路由拦截

  • 需求:没有token(未登录) 跳转到登录页面
  • 1.定义函数 用于返回本地是否有token
  isLogin() {console.log('是否登录', localStorage.getItem('token'))return localStorage.getItem('token')}
  • 2.创建登录页 并路由引入配置登录页
 {/* 登录页面 */}<Login path="/login" component={Login}></Login>
  • 3.在需要判断的页面路由上 动态判断
//是否登录 登录跳转至该页面 未登录 重定向登录页面
<Route path="/center" render={() =>this.isLogin() ? <Center /> : <Redirect to="/login"></Redirect>}></Route>

2.8 路由模式

  • 1.哈希模式 路径带# HashRouter
  • 2.BrowserRouter 路径没有# 真正朝后端发请求
//引入BrowserRouter 
import {BrowserRouter as Router,
} from 'react-router-dom'...
//使用
<Router><Switch>...路由...</Switch>
</Router>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文预览 | 8 月 16 日 NVIDIA 在 WAVE SUMMIT深度学习开发者大会 2023精彩亮点抢先看!

由深度学习技术及应用国家工程研究中心主办&#xff0c;百度飞桨和文心大模型承办的 WAVE SUMMIT深度学习开发者大会2023&#xff0c;将于 8 月 16 日在北京与大家见面。NVIDIA 作为技术合作伙伴&#xff0c;将携手百度飞桨参与这场技术盛会。 在这次大会中&#xff0c;NVIDIA…

Java 项目日志实例基础:Log4j

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 介绍几个日志使用方面的基础知识。 1 Log4j 1、Log4j 介绍 Log4j&#xff08;log for java&#xff09;是 Apache 的一个开源项目&#xff0c;通过使用 Log4j&#xff0c;我…

RabbitMq交换机类型介绍

RabbitMq交换机类型介绍 在RabbitMq中&#xff0c;生产者的消息都是通过交换器来接收&#xff0c;然后再从交换器分发到不同的队列&#xff0c;再由消费者从队列获取消息。这种模式也被成为“发布/订阅”。 分发的过程中交换器类型会影响分发的逻辑。 直连交换机&#xff1a…

【计算机视觉|生成对抗】逐步增长的生成对抗网络(GAN)以提升质量、稳定性和变化

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Progressive Growing of GANs for Improved Quality, Stability, and Variation 链接&#xff1a;[1710.10196] Progressive Growing of GANs for Improved Quality, Stability, and Vari…

神经网络基础-神经网络补充概念-51-局部最优问题

概念 局部最优问题是在优化问题中常见的一个挑战&#xff0c;特别是在高维、非凸、非线性问题中。局部最优问题指的是算法在优化过程中陷入了一个局部最小值点&#xff0c;而不是全局最小值点。这会导致优化算法在某个局部区域停止&#xff0c;而无法找到更好的解。 解决方案…

安防监控视频云存储平台EasyNVR出现内核报错的情况该如何解决?

安防视频监控汇聚EasyNVR视频集中存储平台&#xff0c;是基于RTSP/Onvif协议的安防视频平台&#xff0c;可支持将接入的视频流进行全平台、全终端分发&#xff0c;分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等格式。 近期有用户联系到我们&#xff0c;EasyNVR…

kafka集成篇

kafka的Java客户端 生产者 1.引入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.6.3</version></dependency>2.生产者发送消息的基本实现 /*** 消息的发送⽅*/ …

SAP 预留(Reservation)详解

相信使用SAP的话&#xff0c;对SAP的SAP预留(Reservation)已经有所了解&#xff0c;而且经常使用作业的&#xff0c;并且在很多方案中都使用得到&#xff0c;下面我就简单总结下我所了解的SAP预留(Reservation)&#xff0c;希望对一些需要帮助的人&#xff0c;有所指点。 首先…

分类预测 | MATLAB实现DRN深度残差网络多输入分类预测

分类预测 | MATLAB实现DRN深度残差网络多输入分类预测 目录 分类预测 | MATLAB实现DRN深度残差网络多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.分类预测 | MATLAB实现DRN深度残差网络多输入分类预测 2.代码说明&#xff1a;MATLAB实现DRN深度残差网络…

LVS集群和nginx负载均衡

目录 1、基于 CentOS 7 构建 LVS-DR 群集。 2、配置nginx负载均衡。 1、基于 CentOS 7 构建 LVS-DR 群集。 1.部署LVS负载调度器 1>安装配置工具 [rootnode6 ~]# yum install -y ipvsadm 2>配置LVS虚拟IP&#xff08;VIP地址&#xff09; [rootnode6 ~]# ifconfig ens…

32.Netty源码之服务端如何处理客户端新建连接

highlight: arduino-light 服务端如何处理客户端新建连接 Netty 服务端完全启动后&#xff0c;就可以对外工作了。接下来 Netty 服务端是如何处理客户端新建连接的呢&#xff1f; 主要分为四步&#xff1a; md Boss NioEventLoop 线程轮询客户端新连接 OP_ACCEPT 事件&#xff…

VB+SQL自动点歌系统设计与实现

摘 要 随着社会的发展,人类的进步,21世纪人们的生活的水平有所提高,为了满足人们对生活的需要,丰富业余生活,就需要有一些娱乐的设施来弥补这些空缺,所以开发了自动点歌系统。 论文详细论述了系统总体设计思想、数据库设计以及功能模块设计等,给出了自动点歌系统一般流程…

算法与数据结构(七)--堆

一.堆 1.堆的定义 堆是计算机科学中一类特殊的数据结构的通常&#xff0c;堆通常可以被看做是一颗完全二叉树的数组对象。 堆的特性 1.它是完全二叉树&#xff0c;除了树的最后一层结点不需要是满的&#xff0c;其他的每一层从左到右都是满的&#xff0c;如果最后一层结点不…

管理类联考——逻辑——真题篇——按知识分类——汇总篇——二、论证逻辑——支持加强——第三节——分类3——类比题干支持

文章目录 第三节 支持加强-分类3-类比题干支持真题(2017-28)-支持加强-正面支持-表达“确实如此”真题(2017-36)-支持加强-正面支持-表达“确实如此”真题(2017-39)-支持加强-正面支持-方法有效或方法可行,但多半不选择方法无恶果真题(2017-50)-支持加强真题(2018-2…

linux 文件权限识别及其修改

一、文件权限认识 在 Linux 系统中&#xff0c;一切皆文件&#xff0c;目录也是一种文件形式叫目录文件&#xff0c;它们的属性主要包含&#xff1a;索引节点(inode)&#xff0c;类型、权限属性、链接数、所归属的用户和用户组、最近修改时间等内容。 如下为根目录下目录&…

华创云鼎面试:java后端开发

华创云鼎面试: 1、项目:项目业务介绍、项目人员组成 2、分布式锁用过哪些 基于数据库的锁&#xff1a;可以使用关系型数据库的事务和行级锁来实现分布式锁。通过在数据库中创建一个标志位或特定的锁表来表示资源的锁定状态&#xff0c;其他进程在访问该资源之前需要先获取该锁…

寻路算法(Java 实例代码源码包下载)

目录 寻路算法 Java 实例代码 src/runoob/graph/Path.java 文件代码&#xff1a; 寻路算法 图的寻路算法也可以通过深度优先遍历 dfs 实现&#xff0c;寻找图 graph 从起始 s 点到其他点的路径&#xff0c;在上一小节的实现类中添加全局变量 from数组记录路径&#xff0c;fr…

8月18日,每日信息差

1、中国空间站收获阶段性应用成果。​截至目前&#xff0c;空间站已安排在轨实施了110个空间科学研究与应用项目&#xff0c;涉及空间生命科学与人体研究、微重力物理和空间新技术领域&#xff0c;获得原始实验数据近100TB&#xff0c;下行了近300个实验样品&#xff0c;部分项…

改进YOLO系列:3.添加SOCA注意力机制

添加SOCA注意力机制 1. SOCA注意力机制论文2. SOCA注意力机制原理3. SOCA注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置1. SOCA注意力机制论文 暂未找到 2. SOCA注意力机制原理 3. SOCA注意力机制的配置 3.1common.py配置 ./models/common.p…

Linux 网络发包流程

哈喽大家好&#xff0c;我是咸鱼 之前咸鱼在《Linux 网络收包流程》一文中介绍了 Linux 是如何实现网络接收数据包的 简单回顾一下&#xff1a; 数据到达网卡之后&#xff0c;网卡通过 DMA 将数据放到内存分配好的一块 ring buffer 中&#xff0c;然后触发硬中断CPU 收到硬中…