React中点击登录按钮时在主页面位置渲染新页面的方法

我来给你分享两种实用的实现方式，你可以根据项目的复杂程度来选择：

方案一：用React状态控制（适合简单场景） #

这种方式不需要额外依赖，通过组件内部状态来控制显示哪个页面，适合小型项目或者只有简单页面切换的场景。

具体步骤： #

1. 在你的App.js里引入需要跳转的目标页面组件；
2. 定义一个状态变量来标记是否要显示目标页面；
3. 给登录按钮绑定点击事件，触发状态切换；
4. 根据状态值，在渲染区域动态切换组件。

修改后的示例代码： #

假设你的App.js原本包含主页面和登录按钮，修改后如下：

import React from 'react';
// 引入你的目标页面组件
import TargetPage from './TargetPage';

function App() {
  // 定义状态：初始为false，显示主页面；切换为true则显示目标页面
  const [showTargetPage, setShowTargetPage] = React.useState(false);

  // 登录按钮的点击处理函数
  const handleLogin = () => {
    // 这里可以先添加登录验证逻辑（比如校验账号密码）
    // 验证通过后切换状态，显示目标页面
    setShowTargetPage(true);
  };

  return (
    <div className="App">
      {/* 根据状态切换渲染内容 */}
      {!showTargetPage ? (
        // 原来的主页面内容
        <div className="main-page">
          <h1>主页面</h1>
          <button onClick={handleLogin}>登录</button>
        </div>
      ) : (
        // 状态切换后渲染目标页面
        <TargetPage />
      )}
    </div>
  );
}

export default App;

方案二：用React Router（适合多页面应用） #

如果你的项目有多个页面需要跳转，推荐用React Router来做路由管理，这是React生态中最常用的路由解决方案，结构更规范。

具体步骤： #

1. 先安装依赖：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 在App.js里配置路由结构，用BrowserRouter包裹整个应用，定义主页面和目标页面的路由规则；
3. 用useNavigate钩子实现登录后的页面跳转；

修改后的示例代码： #

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
// 引入主页面和目标页面组件
import MainPage from './MainPage';
import TargetPage from './TargetPage';

// 把主页面抽成独立组件，方便路由管理
function MainPageComponent() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 先执行登录验证逻辑
    // 验证通过后跳转到目标页面路径
    navigate('/target-page');
  };

  return (
    <div className="main-page">
      <h1>主页面</h1>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          {/* 主页面路由：默认访问根路径时显示 */}
          <Route path="/" element={<MainPageComponent />} />
          {/* 目标页面路由：登录后跳转至此 */}
          <Route path="/target-page" element={<TargetPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

额外提示： #

如果需要在目标页面返回主页面，可以在TargetPage组件里添加返回按钮，同样用useNavigate钩子跳回根路径即可：

import { useNavigate } from 'react-router-dom';

function TargetPage() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>目标页面</h1>
      <button onClick={() => navigate('/')}>返回主页面</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Ahmad Bilal