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

已于 2024-01-31 14:04:51 修改
阅读量1.4k 收藏 7
点赞数 19
分类专栏： opengl 文章标签： html react.js javascript
于 2024-01-26 17:43:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52668597/article/details/135871156
版权

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

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

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>

3.正文->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框架的两种组件(任选其一)

import { useState, useEffect, Component } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

//导入three.js
import * as THREE from "three";

// //函数式组件
// function App() {
//   //钩子函数
//   useEffect(() => {
//     //这里放内容
//   }, [])

//   return (
//     <>
//       <div className='App'></div>
//     </>
//   )
// }

//类组件
class App extends Component {
  render() {
    return <div></div>
  }
  componentDidMount() {
    //这里放内容(相机场景渲染)
  }
}
export default App

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

1) 简单实现

当你使用React框架时，可以创建两个React组件表示两个页面，并使用React Router进行页面之间的导航。以下是一个简单的示例，其中有两个页面：HomePage和AboutPage。
首先，确保你已经安装了react和react-router-dom：

npm install react react-dom react-router-dom

然后，你可以创建两个React组件和一个包含路由的父组件。在这个示例中，我们使用了BrowserRouter和Route来设置基本的路由结构。
在这里插入图片描述

main.jsx:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import HomePage from './HomePage';
import AboutPage from './AboutPage';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
  
  ///
  //这个是注释,如果你要用到你的代码中,请删掉这里
  //这里只显示App.jsx,不显示HomePage.jsx,也不显示AboutPage.jsx
  ///
    <App />
    {/* <HomePage />
    <AboutPage /> */}
    
  </React.StrictMode>,
)
App.jsx：
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;
HomePage.jsx
import React from 'react';

const HomePage = () => {
    return (
        <div>
            <h2>Home Page</h2>
            <p>Welcome to the home page!</p>
        </div>
    );
};

export default HomePage;
AboutPage.jsx
import React from 'react';

const AboutPage = () => {
    return (
        <div>
            <h2>About Page</h2>
            <p>This is the about page.</p>
        </div>
    );
};

export default AboutPage;
效果

在这里插入图片描述
在这里插入图片描述

2) 优化(增加用户登录的功能)

main.jsx 不需要改动
App.jsx
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import LoginPage from './LoginPage';
import ProtectedPage from './ProtectedPage';

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    // Your authentication logic goes here
    // For simplicity, I'm just setting isLoggedIn to true
    setLoggedIn(true);
  };

  const handleLogout = () => {
    setLoggedIn(false);
  };

  return (
    <Router>
      <div>
        <nav>
          {/* <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/protected">Protected Page</Link>
            </li>
          </ul> */}
          <button onClick={handleLogout}>Logout</button>
        </nav>

        <hr />

        <Routes>
          <Route
            path="/"
            element={<LoginPage isLoggedIn={isLoggedIn} onLogin={handleLogin} />}
          />
          <Route
            path="/protected"
            element={isLoggedIn ? <ProtectedPage /> : <Navigate to="/" />}
          />
        </Routes>
      </div>
    </Router>
  );
};

export default App;
LoginPage.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginPage = ({ onLogin }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loginError, setLoginError] = useState(false);
    const navigate = useNavigate();

    const handleLogin = () => {
        // Check if username and password are correct
        if (username === 'qwe' && password === '123') {
            onLogin();
            setLoginError(false);
            navigate('/protected'); // Navigate to the protected page on successful login
        } else {
            setLoginError(true);
        }
    };

    return (
        <div>
            <h2>Login Page</h2>
            <div>
                <label>Username:</label>
                <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
            </div>
            <div>
                <label>Password:</label>
                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>
            <button onClick={handleLogin}>Login</button>
            {loginError && <p style={{ color: 'red' }}>Incorrect username or password. Please try again.</p>}
        </div>
    );
};

export default LoginPage;
ProtectedPage.jsx
import React from 'react';

const ProtectedPage = () => {
    return (
        <div>
            <h2>Protected Page</h2>
            <p>Welcome to the protected page!</p>
        </div>
    );
};

export default ProtectedPage;
效果一

在这里插入图片描述
在这里插入图片描述

效果二
  • 优化一下App.jsx:
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import LoginPage from './LoginPage';
import ProtectedPage from './ProtectedPage';

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    // Your authentication logic goes here
    // For simplicity, I'm just setting isLoggedIn to true
    setLoggedIn(true);
  };

  const handleLogout = () => {
    setLoggedIn(false);
  };

  return (
    <Router>
      <div>
        {/* <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/protected">Protected Page</Link>
            </li>
          </ul>
          <button onClick={handleLogout}>Logout</button>
        </nav> */}

        {/* <hr /> */ /*这个就是一条直线*/}

        <Routes>
          <Route
            path="/"
            element={<LoginPage isLoggedIn={isLoggedIn} onLogin={handleLogin} />}
          />
          <Route
            path="/protected"
            element={isLoggedIn ? <ProtectedPage /> : <Navigate to="/" />}
          />
        </Routes>
      </div>
    </Router>
  );
};

export default App;
  • 优化效果:
    在这里插入图片描述
总结

我们可以把ProtectedPage.jsx看成一个受保护的页面,
之后在LoginPage.jsx中登录成功才可以访问ProtectedPage.jsx

在这里插入图片描述

分析

在这里插入图片描述
在这里插入图片描述
上述图片中的文字:
在上述代码中，<Route path=“/protected” element={isLoggedIn ? : } /> 部分定义了 /protected 路径应该渲染的组件。如果用户已经登录 (isLoggedIn 为 true)，则渲染 ProtectedPage 组件；否则，导航到根路径 /。
因此，通过在 中设置 path=“/protected” element={} />，我们告诉 React Router 在 /protected 路径下渲染 ProtectedPage 组件。

4. React的前端架构是什么样的呢?

从内容类型(js,html,css)来看:

  • h t m l html html与 j s js js的放置:
    之前我们就提到了 R e a c t React React的两种组件:函数式组件和类组件,这两种组件存放内容的架构如下:
    在这里插入图片描述
  • C s s Css Css的放置在那里呢?
    React必定有且只有一个index.html文件:
    你可以将css的部分写入到这个 h t m l html html文件中:
    在这里插入图片描述
    在这里插入图片描述

从文件架构来看:

以上面登录架构来看,
我们只需要修改四个文件:
App.jsx,LoginPage.jsx,ProtectedPage.jsx与index.html(这个文件我们之前就已经说过了,就是放css部分的,这里我们就不再赘述了)
在这里插入图片描述

App.jsx(大哥)

在这里插入图片描述

大哥负责二弟与三弟的路由,二弟和三弟每人都掌管一个页面
在这里插入图片描述

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import LoginPage from './LoginPage';
import ProtectedPage from './ProtectedPage';

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    // Your authentication logic goes here
    // For simplicity, I'm just setting isLoggedIn to true
    setLoggedIn(true);
  };

  const handleLogout = () => {
    setLoggedIn(false);
  };

  return (
    <Router>
      <div>
        {/* <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/protected">Protected Page</Link>
            </li>
          </ul>
          <button onClick={handleLogout}>Logout</button>
        </nav> */}

        {/* <hr /> */ /*这个就是一条直线*/}

        <Routes>
          <Route
            path="/"
            element={<LoginPage isLoggedIn={isLoggedIn} onLogin={handleLogin} />}
          />
          <Route
            path="/protected"
            element={isLoggedIn ? <ProtectedPage /> : <Navigate to="/" />}
          />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

LoginPage.jsx(二哥)

在这里插入图片描述

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginPage = ({ onLogin }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loginError, setLoginError] = useState(false);
    const navigate = useNavigate();

    const handleLogin = () => {
        // Check if username and password are correct
        if (username === 'qwe' && password === '123') {
            onLogin();
            setLoginError(false);
            navigate('/protected'); // Navigate to the protected page on successful login
        } else {
            setLoginError(true);
        }
    };

    return (
        <div>
            <h2>Login Page</h2>
            <div>
                <label>Username:</label>
                <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
            </div>
            <div>
                <label>Password:</label>
                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>
            <button onClick={handleLogin}>Login</button>
            {loginError && <p style={{ color: 'red' }}>Incorrect username or password. Please try again.</p>}
        </div>
    );
};

export default LoginPage;

ProtectedPage.jsx(三弟)

在这里插入图片描述

import React from 'react';

const ProtectedPage = () => {
    return (
        <div>
            <h2>Protected Page</h2>
            <p>Welcome to the protected page!</p>
        </div>
    );
};

export default ProtectedPage;

5.关于react框架下的html的class关键字报错的问题:

报错:

在这里插入图片描述

为啥报错

为啥html中,字体的类型不能用class,而是用className,我记得是可以用的!why?

解释

在HTML中，为元素指定样式类的确是使用 class 属性。但是，当你使用JavaScript来操作HTML元素时，特别是在React等JavaScript库或框架中，你会遇到 className 属性。这是因为 class 在JavaScript中是一个保留字，用于声明类。由于这个原因，大多数JavaScript环境（包括React）使用 className 作为设置或访问元素的class属性的方式。

简单来说：

  • 在纯HTML中，你使用 class 属性来指定样式类。
<div class="my-class">Content</div>
  • 在JavaScript操作DOM时，你使用 className 属性。
document.getElementById('myElement').className = 'my-class';
  • 在React和类似的JavaScript库中，你也使用 className。
<div className="my-class">Content</div>

这种区别主要是由于HTML和JavaScript的语法差异造成的。在JavaScript中，由于class是一个关键字，直接用它作为对象属性可能会引起语法错误或混淆。因此，className 在JavaScript环境中成为了一个约定俗成的替代方案。

6.说明

作为一个前端萌新,关于前端知识体系的储备非常有限,以上大部分内容是由GPTs-4.0,Copilot,银狐AI,gemini Pro等众多AI生成的较为良好的知识内容及体系,在此鸣谢!!!

html控制两个页面转换,html页面切换过度效果实现方案_蓝戒的博客
weixin_39573512的博客
05-30 1480
html页面切换过度效果实现方法很简单，但是对于浏览器的设置有需求，经过测试IE浏览器的默认设置没有问题，但是其他浏览器需要进行设置才可以。实现方法就是：利用文本头的 标记实现页面过渡效果，具体说明如下：IE要求:在IE5.5及以上版本的浏览器中.启用网页过渡效果默认情况下都已经启用了，如果需要手动启用则只需在Internet选项中： Advanced(高级) - Browsing(浏览) - ...
react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新
BigFamer的博客
08-12 5938
最近因为项目要求，开始学习并且使用React和Ant Design框架。在前端开发过程中，遇到这样一个页面：有多个tab，每个tab下都是一个table表格来进行数据展示。但，每个table的title都是一样的，如何进行表格的渲染和对应数据的展示就值得开发人员考虑。下面，我们一起来瞧瞧。...
React页面内容切换
yzm521314的博客
07-23 1861
React页面内容切换简单实现方式 实现思路 1、选有html+css 罗列布局 2、使用css 进行样式布局可以使用css 能改变具体显示状态 3、在html 可以增加或修改对应class 来实现页面布局 4、把对应可变的class 通过state 单独提出来 5、修改state 默认值可以进行理想版块显示 6、增加setState方法 可以轻松设置class 来改变想要的布局 7、通过点击事件来切换对应的class 代码如下 import React, { Component } fro
HTML文件里编写react代码，以及html里的antd无法设置中文~~
link_two的博客
10-17 830
有些小伙伴在一个.html文件里编写前端代码，该文件放在公共文件public里，部署后进行展示。当某个功能不参与登录校验就进行访问时，1、在项目里写一个路由提供访问，2、写一个.html进行地址访问，当然第一个是足够满足需求了。如果在初始化加载时需要执行的时间过长达到6-8秒，有些会接受不了时间过于加载过长，从而提出需求。这时就需要用到第二个方法，
React中的页面跳转方式详解
每天都想吃好吃的
12-07 2673
React Router 是 React 官方推荐的路由库，它提供了一些组件，用于管理应用程序的不同页面之间的导航。使用 React Router 可以通过编写简单的代码来实现页面跳转。可以实现在 React 中的页面跳转，但它不是推荐的做法，因为它会刷新整个页面，而不是单独更新组件。组件提供了一种不刷新整个页面的跳转方式。元素的接口，但它不会导致整个页面的刷新。React Router 中的。组件包裹应用程序，并使用。组件定义每个页面的路由。组件提供了一个类似于。
php如何进行界面切换,html如何实现tab页面切换
weixin_39834984的博客
03-09 477
html实现tab页面切换的方法：首先创建一个类名为wrap的div当作容器；然后创建四个label标签，在每一个label中创建一个span标签；最后创建一个div作为这个导航项。本教程操作环境：windows7系统、html5版，DELL G3电脑。html实现tab页面切换的方法：原理：通过label标签的关联属性和input的单选类型实现相应div的显示1、创建一个类名为wrap的div当...
React Navigation实现两个文件界面跳转
qwe12309888的博客
06-15 2648
先来看看效果 在这里我是分开两个文件来写这两个界面的，直接上代码： FirstPage.js文件： import React, { Component } from 'react'; import SecondPage from './pages/FlashPage'; import { StackNavigator, TabNavigator, } from 're
React-Native 实现点击Tab标签切换Tab页面
07-29
React-Native是由Facebook开发的一个开源框架，它允许开发者使用JavaScript和React来构建原生移动应用。React是Facebook推出的用于构建用户界面的JavaScript库，它的核心理念是组件化，通过组合多个小而独立的组件来...
react实现antd线上主题动态切换功能
12-09
在React应用中实现Ant Design的在线主题动态切换功能是一项常见的需求，特别是在有多个主题共存的情况下。本示例是基于`create-react-app`构建的React应用，并结合了`mobx`状态管理库、`webpack5`打包工具以及`antd`...
React框架教程.zip
06-11
这两个库提供了一种集中式管理应用状态的方法，确保数据流的一致性。 8. **React Router**：路由在单页应用中至关重要，React Router允许你定义和管理页面间的导航。 9. **React Native**：如果对原生移动应用开发...
react框架所需js资源文件
10-17
这个文件通常命名为`react.js`或`react.min.js`，提供未压缩和压缩两种版本，生产环境中通常使用压缩版以减小文件大小，提高页面加载速度。 2. **React DOM**：React DOM是React与浏览器DOM交互的部分，负责在实际...
React入门实战（二）页面跳转（附完整代码）
安之ccy的博客
07-09 1万+
React入门实战二，通过此练习掌握如下知识点： 1.React路由 —— react-router-dom 2.axios请求数据 3.生命周期钩子componentDidMount的使用
react中实现页面跳转
热门推荐
weixin_43886986的博客
03-09 1万+
方式一：history在原窗口跳转 this.props.history.push(“你的url后缀路径，不包含域名”) //比如 this.props.history.push(“detail/”) （要在主函数中的参数加上props，一定要是主函数） 方式二：打开新的跳转窗口 let url = document.URL + “/detail/” + projectId; window.open(url) //此处的url是全路径 方式三：使用标签，原窗口跳转 项目列表 方式四：非主函数直接修改pat
React实现app页面切换效果
CSDN_Sviexu的博客
01-29 1371
使用react-activation react-router-v6 react-transition-group实现原生app页面跳转动画
【从0搭建react后台管理】10.react页面跳转方式
永远不要忘记为何至此
03-01 494
react页面跳转方式
react实现页面多个模块的切换
m0_57479235的博客
07-23 1533
前言 这是做的一个多模块切换的一个案例，也是第一会这样大量的使用表单，大概有7，8个模块，这里用其中的一个模块来做展示 以下三张图片对应的就是三个模块了 这是第一个展示面 这是第二个编辑页 这是呈现数据的页面 实现过程 1、每一个模块就是一个组件 <script> // 这里定义一个默认值，作为第一个显示的模块 state={cls='tj'} </script> <div className="module1"> <div className=`m
react生命周期请求数据实现切换页面内容
m0_71933813的博客
12-10 276
react生命周期请求数据实现切换页面内容，挂载阶段 componentDidMount: 组件装载之后调用，此时可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅 更新阶段 getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用 shouldComponentUpdate: shouldComponentUpdate(nextProps, nextStat
React中路由操作、页面跳转
李白
08-02 1万+
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。一般在完成某种操作，需要返回上一个页面时使用。...
Scene进行两个页面之间的跳转
最新发布
10-30
在Android中，`Scene`通常用于React Native库中，它提供了视图层次结构管理，包括页面的切换（即页面间的跳转）。如果你使用的是React Native，你可以使用`react-navigation`库来实现页面间跳转。 以下是如何使用`react-navigation`中的`StackNavigator`进行页面跳转的基本步骤： ```java import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './screens/HomeScreen'; import DetailsScreen from './screens/DetailsScreen'; // 创建堆栈导航器 const Stack = createStackNavigator(); function App() { return ( <Stack.Navigator> {/* 设置初始屏幕 */} <Stack.Screen name="Home" component={HomeScreen} /> {/* 添加另一个屏幕 */} <Stack.Screen name="Details" component={DetailsScreen} /> {/* 更改当前显示的屏幕 */} {/* 如需从Home跳转到Details，可以在HomeScreen组件内的按钮点击事件中调用 */} {/* navigation.navigate('Details') */} </Stack.Navigator> ); } ``` 在这个例子中，`HomeScreen`是第一个屏幕，`DetailsScreen`是第二个屏幕。当你点击HomeScreen中的按钮时，调用`navigation.navigate('Details')`就会使`DetailsScreen`显示出来，替换掉当前的`HomeScreen`。 如果你没有使用React Native或正在使用其他框架，请提供更多的上下文信息，以便我能更准确地帮助你。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

踏过山河，踏过海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值