React@16.x(39)路由v5.x(4)常见应用场景(1)- 受保护的页面

目录

  • 1,实现
  • 2,知识点
    • 1,Route.children 和 Route.render
    • 2,保存跳转 login 之前的路由
    • 3,解构参数

现在有3个页面

  • Home 页面
  • Login 页面
  • Personal 页面(受保护,未登录无法进入)

1,实现

import { BrowserRouter as Router, Route, Switch, Link, Redirect } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import loginInfo from "./loginInfo";function Login(props) {return (<><h1>登录页</h1><buttononClick={() => {loginInfo.login();// 跳转进入 login 之前,准备进入的页面(受保护页面)if (props.location.state) {props.history.replace(props.location.state);} else {props.history.replace("/");}}}>登录</button></>);
}
function Home() {return (<><h1>Home页</h1><Link to="/personal">个人中心</Link></>);
}function Personal() {return <h1>个人中心页</h1>;
}export default function App() {return (<Router><Switch><Route path="/login" component={Login}></Route><ProtectedRoute path="/personal" component={Personal}></ProtectedRoute><Route component={Home}></Route></Switch></Router>);
}

自定义的 ProtectedRoute 组件。使用方式和 Route 组件一样(参数一致),但需要登录才能进入。

import React from "react";
import { Route, Redirect } from "react-router-dom";
import loginInfo from "./loginInfo";export default function ProtectedRoute({ component: Comp, children, ...rest }) {return (<Route{...rest}render={(values) => {return loginInfo.isLogin ? <Comp /> : <Redirect to={{ pathname: "/login", state: values.location.pathname }}></Redirect>;}}></Route>);
}

2,知识点

1,Route.children 和 Route.render

官方文档

2个都是函数,参数是路由信息(history,location,match )。

区别render 只有当路由匹配时才会执行,children 无论是否匹配都会执行。

注意,上面的示例中因为使用了 Switch 组件,所以只会渲染一个路由组件,此时 renderchildren 表现是一致的。

2,保存跳转 login 之前的路由

一般当跳转受保护路由时,如果进入了 /login ,则需要保留之前的路由,方便登录后直接进入。

  • 方式1:将该路由路径作为 search 参数保留,之后跳转。
  • 方式2,将该路径路径保存在 state 中(push 的第2个参数),之后跳转。上面的例子用的该方式。

3,解构参数

如果传递的对象中,需要传递给其他组件,但有的属性不用传递。

此时,可以使用解构+剩余参数,参考上面的 ProtectedRoute 组件。


以上。

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

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

相关文章

几种常见的方式可以引入CSS文件

1. <link> 标签 使用 <link> 标签将外部样式表引入HTML文档。 <head><link rel"stylesheet" href"styles.css"> </head>2. <style> 标签 在HTML文档中使用 <style> 标签定义内部样式。 <head><sty…

YOLOv8关键点pose训练自己的数据集

这里写自定义目录标题 YOLOv8关键点pose训练自己的数据集一、项目代码下载二、制作自己的关键点pose数据集2.1 标注(非常重要)2.1.1 标注软件2.1.2 标注注意事项a.多类别检测框b.单类别检测框2.2 格式转换(非常重要)2.3 数据集划分三、YOLOv8-pose训练关键点数据集3.1 训练…

通过frp实现内外网映射

frp介绍和使用方法可以参考官网:安装 | frp 1、准备两台服务器&#xff0c;一台内网服务器A&#xff0c;一台有公网ip的外网服务器B(47.12.13.15) 2、去官方仓库下载frp安装包&#xff1a;Releases fatedier/frp GitHub 下载包根据自己服务系统选择 ​ 3、先在外网服务器…

GB 16807-2009 防火膨胀密封件

防火膨胀密封件是指在火灾时遇火或高温作用能够膨胀&#xff0c;且能辅助建筑构配件使之具有隔火、隔烟、隔热等防火密封性能的产品。 GB 16807-2009 防火膨胀密封件测试项目 测试要求 测试标准 外观 GB 16807 尺寸允许偏差 GB 16807 膨胀性能 GB 16807 产烟毒性 GB …

《昇思25天学习打卡营第1天|onereal》

昇思25天学习打卡营第1天;有点一头雾水的感觉&#xff0c;说是要在jupyter中签到打卡&#xff0c;是不是就是复制粘贴。我以为是要在终端机器中运行代码呢。 如果只是粘贴代码&#xff0c;那未免太简单了。 我还是想运行这个算力机器&#xff0c;但是他们说每次只能2小时。太…

AI播客下载:Eye on AI(AI深度洞察)

"Eye on A.I." 是一档双周播客节目&#xff0c;由长期担任《纽约时报》记者的 Craig S. Smith 主持。在每一集中&#xff0c;Craig 都会与在人工智能领域产生影响的人们交谈。该播客的目的是将渐进的进步置于更广阔的背景中&#xff0c;并考虑发展中的技术的全球影响…

pp 学习一 生产模块主数据

生产成本&#xff1a;原材料是什么&#xff0c;价格多少&#xff0c;人工耗费时间&#xff0c;以及其他的费用 离散制造&#xff1a;有生产订单。工序是分开的&#xff08;可以停&#xff09; 重复制造&#xff1a;没有生产订单&#xff08;可能有客户下达的任务单或者计划订…

一分钟彻底掌握Java多线程生产者与消费者模型

代码 package com.example.KFC; public class Cooker extends Thread { public void run() { while (true) { synchronized (Desk.lock) { if (Desk.maxCount 0) { break; } else { if (!Desk.flag) { System.out.println("Cooker makes a hamburger"); …

unity中使用commandbuffer将自定义画面渲染到主相机上

CommandBuffer 保存渲染命令列表&#xff08;例如设置渲染目标或绘制给定网格&#xff09;。您可以指示 Unity 在内置渲染管线中的各个点安排和执行这些命令&#xff0c;因此&#xff0c;您可以自定义和扩展 Unity 的渲染功能。 这句话意味着你可以通过command buffer让相机渲…

计算机基础知识——面向对象:封装+继承+多态整理

面向对象三大特性&#xff1a;封装、继承、多态。 1.封装 将一系列相关事物的共同的属性和行为提取出来&#xff0c;放到一个类中&#xff0c;同时隐藏对象的属性和实现细节&#xff0c;仅对外提供公共的访问方式。 【JavaBean类就可以看作是封装的完美案例。】 setter和get…

001 线性查找

文章目录 迭代器主程序 迭代器 -- 定义一个名为 linearSearch 的函数&#xff0c;它接受两个参数&#xff1a;data&#xff08;一个数组&#xff09;和 target&#xff08;一个目标值&#xff09; function linearSearch(data, target) -- 使用 for 循环遍历数组 data&…

云动态摘要 2024-06-25

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新产品更新 Web应用防火墙 - 验证码支持微信小程序接入 阿里云 2024-06-25 支持客户从微信小程序场景下接入&#xff0c;提供人机识别的安全防护。 工业数字模型驱动引擎 - iDME控制台换新升级 华为云…

Hadoop 面试题(九)

1. 简述下面关于Hadoop系统中使用CombineFileInputFormat解决小文件问题的描述错误的是&#xff08;&#xff09; &#xff1f; A&#xff1a;CombineFileInputFormat是使用Hadoop API(抽象类CombineFileInputFormat)来解决小文件的问题 B&#xff1a;抽象类CombineFileInputF…

[20] Opencv_CUDA应用之 关键点检测器和描述符

Opencv_CUDA应用之 关键点检测器和描述符 本节中会介绍找到局部特征的各种方法&#xff0c;也被称为关键点检测器关键点(key-point)是表征图像的特征点&#xff0c;可用于准确定义对象 1. 加速段测试特征功能检测器 FAST算法用于检测角点作为图像的关键点&#xff0c;通过对…

轻松掌握:工科生如何高效阅读国际期刊和撰写论文(上)

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

C++使用Spdlog异步日志

Head-only库 #define SPDLOG_ACTIVE_LEVEL SPDLOG_LEVEL_TRACE //为了使用源码函数行号等符号用的 #include "spdlog/spdlog.h" #include "spdlog/async.h" #include "spdlog/sinks/stdout_color_sinks.h" #include "spdlog/sinks/rotatin…

七天速通javaSE:第三天 程序控制结构:练习题

文章目录 前言一、基础1.计算从0~100之间奇数之和和偶数之和2. 用for循环输出0~1000之间能被5整除的数&#xff0c;每行输出三个 二、进阶1. 九九乘法表2.等边三角形 前言 本文主要讲解三种基本程序控制结构的练习题&#xff0c;以期熟练掌握顺序、选择、循环三种基本结构 一、…

怎么用Python接口发送推广短信

群发短信平台推广&#xff0c;有不少优点。其中通过正规106运营商平台推送&#xff0c;信息更加正规性。尤其是对接接口短信&#xff0c;比如验证码之类的&#xff0c;个人手机号码下发的验证码一般都不靠谱。 支持点对点一对一群发&#xff0c;方便工资条、物业通知等变量信息…

Android开发系列(十)Jetpack Compose之Card

Card是一种常用的UI组件&#xff0c;用于显示一个具有卡片样式的容器。Card组件通常用于显示列表项、卡片式布局或任何需要显示边框和阴影的UI元素。 使用Card组件&#xff0c;您可以轻松地创建带有卡片效果的UI元素。以下是一些Card组件的常见属性和功能&#xff1a; elevati…

【vuejs】$forceUpdate 的使用和讲解

1. $forceUpdate 概述 forceUpdate是Vue实例的一个内置方法&#xff0c;用于强制Vue组件重新渲染。通常情况下&#xff0c;Vue的响应式系统能够自动检测到数据的变化并更新DOM&#xff0c;但在某些特定情况下&#xff0c;可能需要手动触发重新渲染&#xff0c;$forceUpdate方法…