React 18中点击按钮后如何切换无导航链接的页面？

方案一：用组件状态控制渲染（无需路由） #

这是最直接的实现方式，完全不需要依赖路由库，通过父组件的状态来控制显示哪个页面组件。

步骤： #

• 在根组件（比如App.js）中维护一个状态，标记当前是否已完成登录操作。
• 给登录页面组件传递一个回调函数，点击登录按钮时调用该函数更新状态。
• 根据状态值，条件渲染登录页面或目标页面。

代码示例： #

// App.js
import { useState } from 'react';
import Login from './Login';
import Home from './Home';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('');

  // 处理登录按钮点击的回调
  const handleLogin = (inputName) => {
    setUsername(inputName);
    setIsLoggedIn(true);
  };

  return (
    <div className="App">
      {isLoggedIn ? (
        <Home username={username} />
      ) : (
        <Login onLogin={handleLogin} />
      )}
    </div>
  );
}

export default App;

// Login.js
import { useState } from 'react';

function Login({ onLogin }) {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name.trim()) {
      onLogin(name);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        姓名：
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="请输入姓名"
        />
      </label>
      <button type="submit">进入页面</button>
    </form>
  );
}

export default Login;

// Home.js
function Home({ username }) {
  return (
    <div>
      <h1>欢迎，{username}！</h1>
      {/* 这里是目标页面的内容 */}
    </div>
  );
}

export default Home;

方案二：用React Router的内存路由（无URL变化） #

如果一定要用路由体系，但不想修改浏览器地址栏的URL，可以使用MemoryRouter，它会在内存中管理路由状态，不会影响地址栏。

代码示例： #

// App.js
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Home from './Home';

function App() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </MemoryRouter>
  );
}

export default App;

// Login.js
import { useState, useNavigate } from 'react';

function Login() {
  const [name, setName] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name.trim()) {
      // 跳转到home页面，地址栏不会变化
      navigate('/home', { state: { username: name } });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        姓名：
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="请输入姓名"
        />
      </label>
      <button type="submit">进入页面</button>
    </form>
  );
}

export default Login;

// Home.js
import { useLocation } from 'react-router-dom';

function Home() {
  const location = useLocation();
  const username = location.state?.username;

  return (
    <div>
      <h1>欢迎，{username}！</h1>
    </div>
  );
}

export default Home;

使用这个方案需要先安装react-router-dom：

npm install react-router-dom

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