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

最新推荐文章于 2024-09-02 17:34:07 发布

她说她一如既往的爱我

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量89

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_62980497/article/details/141810806

版权

1.项目背景

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

2.首先是古老的做法

先温习一下

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("用户名或密码不正确，请重试。");
}

<!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>