如何使用react框架进行两个html页面的切换?

如何使用react框架进行两个html页面的切换?

  • 项目背景
  • 首先是古老的做法
    • login.html
    • index.html
  • 正文->react框架如何设置两个页面的跳转?
    • 配置react框架的环境
    • react框架如何实现两个页面的跳转?

项目背景

古老的html页面跳转的做法无法在react框架中直接适配,所以非常有必要从新开始学习一下react框架是如何进行两个页面的跳转的.

首先是古老的做法

先温习一下

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-image: url('./src/picture/2.png');
            /* 替换为你的图片路径 */
            background-size: cover;
            /* 背景图片覆盖整个页面 */
        }

        .login-container {
            text-align: center;
            background: rgba(255, 255, 255, 0.8);
            /* 半透明白色背景 */
            padding: 20px;
            border-radius: 10px;
        }

        .form-row {
            margin-bottom: 10px;
        }

        label,
        input {
            display: inline-block;
            vertical-align: middle;
            margin: 5px 0;
        }

        label {
            width: 80px;
        }

        input {
            width: 200px;
        }
    </style>
    <script>
        function checkLogin() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if (username === "我是用户名(用户名填这里)" && password === "我是密码(密码填这里)") {
                window.location.href = "index.html";
            } else {
                alert("用户名或密码不正确,请重试。");
            }
        }
    </script>
</head>

<body>
    <div class="login-container">
        <h1>登录前的页面</h1>
        <form>
            <div class="form-row">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-row">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="button" onclick="checkLogin()">登录</button>
        </form>
    </div>
</body>

</html>

下面这里很重要,只要用户名和密码都对了,就直接跳转了!!!

if (username === "我是用户名(用户名填这里)" && password === "我是密码(密码填这里)") {
    window.location.href = "index.html";
} else {
    alert("用户名或密码不正确,请重试。");
}

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>登录后的界面</title>

  <style>
    body {
      margin: 0;
      overflow: hidden;
    }



    #myButton {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }

    #myButton2 {
      position: absolute;
      top: 10px;
      left: 80px;
      z-index: 1;
    }

    #myButton3 {
      position: absolute;
      top: 10px;
      left: 160px;
      z-index: 1;
    }

    #myButton4 {
      position: absolute;
      top: 80px;
      left: 10px;
      z-index: 1;
    }


    #demo-simple-select-label {
      position: absolute;
      top: 50px;
      z-index: 1;
    }

    #demo-simple-select {
      position: absolute;
      top: 50px;
      left: 40px;
      z-index: 1;
    }



    /* 可以在这里定义 CSS 样式,也可以使用内联样式,下面这个是文本 */
    #highlighted-text0 {
      position: absolute;
      top: 30px;
      /* 设置文本颜色为红色 */
      color: red;
      /* 设置字体大小 */
      font-size: 24px;
      /* 设置字体加粗 */
      font-weight: bold;
      /*位于顶部*/
      z-index: 999;
      /*左移*/
      left: 430px;
    }

    #highlighted-text1 {
      position: absolute;
      top: 60px;
      /* 设置文本颜色为红色 */
      color: red;
      /* 设置字体大小 */
      font-size: 24px;
      /* 设置字体加粗 */
      font-weight: bold;
      /*位于顶部*/
      z-index: 999;
      /*左移*/
      left: 430px;
    }

    /* 隐藏下拉框内容 */
    .dropdown-content {
      position: absolute;
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    /* 下拉框按钮样式 */
    .dropdown button {
      top: 60px;
      position: absolute;
      z-index: 1;
      padding: 10px;
      font-size: 16px;
    }

    /* 下拉框选项样式 */
    .dropdown-content a {
      position: absolute;
      z-index: 1;
      display: block;
      padding: 12px 16px;
      text-decoration: none;
      color: #333;
    }

    /* 鼠标悬停时改变选项背景颜色 */
    .dropdown-content a:hover {
      position: absolute;
      z-index: 1;
      background-color: #ddd;
    }

    #mySelector {
      position: absolute;
      top: 40px;
      left: 10px;
      z-index: 1;
    }

    /* 自定义选择器的样式 */
    .custom-select {
      padding: 5px;
      /* 调整选择器的内边距以容纳图标 */
    }
  </style>


</head>

<body>
  <select id="mySelector" class="custom-select">
    <option value="option0">Please select the attachment</option>
    <option value="option1">附件 1</option>
    <option value="option2">附件 2</option>
    <option value="option3">附件 3</option>
    <option value="option4">附件 4</option>
    <option value="option5">附件 5</option>
    <option value="option6">附件 6(待添加)</option>
    <option value="option7">附件 7(待添加)</option>
    <option value="option8">附件 8(待添加)</option>
    <option value="option9">附件 9(待添加)</option>
    <option value="option10">附件 10(待添加)</option>
    <option value="option11">附件 11(待添加)</option>
    <option value="option12">附件 12(待添加)</option>
    <option value="option13">附件 13(待添加)</option>
    <option value="option100">瑶瑶领先的mate100!</option>
  </select>

  <button id="myButton">一键复原</button>
  <button id="myButton2">Un Check</button>
  <button id="myButton3">Copmpare</button>
  <button id="myButton4">Dental arch line</button>

  <div id="highlighted-text0">请耐心等待...</div>

  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>

</body>

</html>

正文->react框架如何设置两个页面的跳转?

配置react框架的环境

(其实之前一直想写一篇如何配置react框架+three.js的环境的文章,但是想想自己大概率不会做太长时间的前端吧,后来就没写,没想到从12月1号一直到了第二年的1月26号)
其实配置react框架+three.js的环境非常简单,下面跟上步伐一起配置:

    1. 创建一个你自己的文件夹(方便管理),名字你随便起,我就叫react-test-three了
mkdir react-test-three
cd react-test-three
    1. npm init vite@latest
      然后你按照下面的图片进行选择:
      在这里插入图片描述
      在这里插入图片描述
  • 3.进入项目文件夹
    在这里插入图片描述
    执行以下ls,你就可以看到你的项目文件夹了,然后
    在这里插入图片描述
    1. 初始化项目,请依次执行
npm install
npm install three
npm run dev

至此,react框架+three.js就配置好了!!!
在这里插入图片描述
非常nice! 难道不是吗?说实话,偶尔搞搞前端还真不错!

react框架如何实现两个页面的跳转?

待补充…

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL-进阶-索引

一、索引概述 1、介绍 2、有误索引搜索效率演示 3、优缺点 二、索引结构 1、B-Tree&#xff08;多路平衡查找树&#xff09; 2、BTree 3、Hash 三、索引分类 四、索引语法 1、语法 2、案例 五、SQL性能分析 1、查看执行频次 2、慢查询日志 3、show-profile 4、explain 六、索…

redis 入门

一、什么是redis? redis是c语言编写的高性能(读的速度是110000次/s,写的速度是81000次/s)的k-v形式的数据库&#xff0c;数据存在内存中 二、redis的使用场景&#xff1f; 数据量小&#xff0c;访问量大 三、redis的启动和关闭 启动&#xff1a; 打开cmd&…

2. HarmonyOS应用开发DevEcoStudio准备-1

2. HarmonyOS应用开发DevEcoStudio准备-1 下载 DevEco Studio 进入HUAWEI DevEco Studio产品页产品页。 单击下载列表右侧的按钮&#xff0c;下载 DevEco Studio。 安装 DevEco Studio 下载完成后&#xff0c;双击下载的 deveco-studio-xxxx.exe&#xff0c;进入 DevEco St…

gitee建库并git

箴言&#xff1a;书山有路勤为径 文章目录 前言一、gitee导入ssh二、gitee建库三、克隆到本地四、关联本地工程到远程仓库五、push流程总结 前言 nodejs每天的学习都有代码产出&#xff0c;转念一想不如在码云上面搞个仓库&#xff0c;也经历了些许波折&#xff0c;往常也建了…

接口测试工具开发文档

1 开发规划 1.1 开发人员 角 色 主要职责 负责模块 人员 备注 n xxx模块 xxx 1.2 开发计划 <附开发计划表> 1.3 开发环境和工具 开发工具 工具 作用 Notepad 编辑器 Perl 解释器 2 总体设计 设计思路&#xff1a;因为测试app和server。首先必须…

LeetCode.11. 盛最多水的容器

题目 题目链接 分析 这道题的意思就是让我们找两个下标&#xff0c;以这两个下标组成的线为底&#xff0c;高度取这两个位置对应数字的最小值为高&#xff0c;组成一个长方形&#xff0c;求长方形最大的面积可以为多少。 暴力的解法是什么&#xff1f;&#xff1f;&#xf…

【Linux】开始使用 vim 吧!!!

Linux 1 what is vim &#xff1f;2 vim基本概念3 vim的基本操作 &#xff01;3.1 vim的快捷方式3.1.1 复制与粘贴3.1.2 撤销与剪切3.1.3 字符操作 3.2 vim的光标操作3.3 vim的文件操作 总结Thanks♪(&#xff65;ω&#xff65;)&#xff89;感谢阅读下一篇文章见&#xff01;…

工业4.0前沿:8DI/4DO/6AI RTU在石油管道监测中的应用

在当前数字化转型的大潮下&#xff0c;石油化工行业的智能化进程正以前所未有的速度推进。其中&#xff0c;物联网技术作为连接物理世界与数字世界的桥梁&#xff0c;在管道监控与安全管理领域发挥着至关重要的作用。一款专为石油化工管道设计的全网通物联网RTU终端应运而生&am…

消息中间件之RocketMQ(五)

RocketMQ高性能背后的核心原理 1.消息主从复制 如果Broker以一个集群的方式部署&#xff0c;会有一个master节点和多个Slave节点&#xff0c;消息需要从master复制到slave上&#xff0c;而消息复制的方式分为同步复制和异步复制。 同步复制: 同步复制是等Master和Slave都写入…

为什么网页打开慢?是服务器的问题吗?

当我们遇到网页加载缓慢时&#xff0c;首先想到的可能是服务器的问题。的确&#xff0c;服务器是影响网页加载速度的一个重要因素。然而&#xff0c;这并非是唯一的原因。实际上&#xff0c;网页加载速度受多种因素影响&#xff0c;包括但不限于服务器、网络带宽、DNS解析时间、…

linux0.11源码看信号的处理流程

序 日常Linux写代码或者使用中难免会使用siganl&#xff0c;包括我们使用ctrl-c结束程序&#xff0c;使用kill命令发送信号&#xff0c;或者说程序core后操作系统向程序发送的信号&#xff0c;以及我们程序内部自定义的信号处理。 我们选择linux0.11一个原因是它比较简单&…

程序员如何应对中年危机

中年危机是一个普遍存在的问题&#xff0c;不仅仅局限于程序员这个职业。不过&#xff0c;对于程序员来说&#xff0c;由于技术更新迅速&#xff0c;中年危机可能更加明显。以下是一些应对中年危机的建议&#xff1a; 持续学习新技术和工具&#xff1a;计算机技术发展迅速&…

快快销shop积分商城:全额积分抵扣营销 打造积分换购专区

快快销shop积分商城是一个创新的营销平台&#xff0c;它通过全额积分抵扣的策略&#xff0c;鼓励用户在商城内消费并积累积分。这种营销方式不仅能提升用户的购物体验&#xff0c;还能有效地促进销售。 全额积分抵扣意味着用户在商城内消费时&#xff0c;可以全额使用积分进行…

原生js是怎么创建元素的?

问: <div class"share-img"> <img src"../img/pic_share-tip.png" alt""> </div>原生js怎么创建一个这个元素? 回答: 问: 上面代码执行结果是什么样的? 回答:

攻防演练 |解决Nmap无法扫描B段资产问题

前段时间老大发来任务&#xff0c;让帮忙用nmap扫一些ip段&#xff0c;我拿过来就准备开扫… 但是发现nmap无法直接扫描同一B段不同C段下的IP段&#xff0c;例如111.111.111.0-111.111.222.255 原本我是准备写个工具联动nmap来扫描大批量IP段资产的 但是由于环境有些问题&am…

什么工具能将视频转成gif?分享一个在线制作gif网站

Gif动图看起来效果非常的炫酷&#xff0c;也很复杂。这种gif动图制作起来是不是也很麻烦呢&#xff1f;其实制作gif动画的方法非常的简单&#xff0c;不用下载软件&#xff0c;小白也能操作。只需要使用在线制作gif&#xff08;https://www.gif.cn/&#xff09;工具-GIF中文网&…

【云驻共创】零门槛Serverless课堂 应用全托管 so easy!

前言 一切要从一个风和日丽的早上说起&#xff1a; 那天&#xff0c;阳光正好&#xff0c;微风不燥。还来不及从容吃口早饭&#xff0c;我就接到了线上报警&#xff0c;赶忙打开了电脑&#xff0c;处理突发的流量高峰导致的页面报错。 重启好服务&#xff0c;饭都冷了。 我…

3dmax效果图渲染出现曝光怎么解决?

在使用3ds Max完成效果图渲染工作时&#xff0c;有时会遇到曝光过度的问题&#xff0c;这会使得渲染的图像出现光斑或者过亮&#xff0c;损害了效果的真实感和美观度。那么解决解决3dmax曝光问题呢&#xff1f;一起看看吧&#xff01; 3dmax效果图渲染出现曝光解决方法 1、相机…

使用Opencv-python库读取图像、本地视频和摄像头实时数据

使用Opencv-python库读取图像、本地视频和摄像头实时数据 Python中使用OpenCV读取图像、本地视频和摄像头数据很简单&#xff0c; 首先需要安装Python&#xff0c;然后安装Opencv-python库 pip install opencv-python然后在PyCharm或者VScode等IDE中输入对应的Python代码 一…

web前端---------盒子模型

1.内容 盒子的内容可以包含文字、图片等多种类型。 浏览器在加载网页时&#xff0c;会将元素按照内容区分为替换元素与非替换元素。 &#xff08;1&#xff09;替换元素指的是HTML中的一些形如<img>、<input>等非文本元素。 这些元素本身不包含任何内容&#x…