如何配置登录按钮：验证通过后跳转至指定URL而非原地渲染组件

1. 引入React Router导航工具 #

首先确认项目已安装并配置React Router DOM，在auth.js中导入useNavigate钩子：

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

2. 修改登录逻辑，添加跳转代码 #

在Auth组件内初始化导航实例，登录成功后调用navigate('/posts')跳转，同时移除原本在Auth组件内渲染Home的逻辑（Auth只负责登录页面）：

const Auth = () => {
  const { Userr } = useContext(Gloabaldata);
  const navigate = useNavigate(); // 初始化导航钩子

  const login = async (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        // 登录成功后跳转到/posts路径
        navigate('/posts');
      })
      .catch((error) => {
        // 可在此添加错误提示，比如 alert(error.message)
      });
  };

  return (
    <>
      <form>
        <input
          type="email"
          placeholder="Email Address"
          onChange={(event) => {
            setregisterEmail(event.target.value);
          }}
        />

        <input
          type="password"
          placeholder="Password"
          autoComplete="on"
          onChange={(event) => {
            setregisterPassword(event.target.value);
          }}
        />
        <button onClick={login} className="sign-in">
          SIGN IN
        </button>
        <button className="switchmode">
          <h3>dont have a ACCOUNT ? SIGN UP</h3>
        </button>
      </form>
    </>
  );
};

export default Auth;

3. 配置路由规则 #

在路由配置文件（如App.js或Routes.js）中，设置/posts路径对应Home组件，同时添加路由保护确保只有登录用户能访问：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Auth from './auth';
import Home from './Home';
import { useContext } from 'react';
import { Gloabaldata } from './context';

// 路由保护组件
const ProtectedRoute = ({ children }) => {
  const { Userr } = useContext(Gloabaldata);
  return Userr ? children : <Navigate to="/auth" />;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/auth" element={<Auth />} />
        {/* 用ProtectedRoute包裹Home，限制未登录用户访问 */}
        <Route 
          path="/posts" 
          element={
            <ProtectedRoute>
              <Home />
            </ProtectedRoute>
          } 
        />
        {/* 默认路由跳转至登录页 */}
        <Route path="/" element={<Navigate to="/auth" />} />
      </Routes>
    </Router>
  );
}

export default App;

注意事项 #

• 确保全局上下文Gloabaldata在登录成功后正确更新Userr的值，路由保护才能正常生效。
• 未登录用户直接访问/posts时，会自动跳转到登录页面。

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