react-router-dom与登录页联动问题：点击按钮后Link的to属性未即时生效

你的问题本质是React state更新的异步性导致的：点击按钮时，先执行handleLoginButton更新linkTo，但state更新不会立即生效，此时Link的to还是原来的/，所以第一次点击只会触发onClick更新state，不会跳转；第二次点击时state已经更新，Link才会跳转到/home。另外原代码里!loggedUser的判断逻辑错误——filter返回的是数组，空数组在布尔判断中是true，应该用loggedUser.length === 0来判断是否匹配到用户。

方案1：使用useNavigate直接跳转（推荐） #

这是最简洁的方式，不需要依赖Link的to属性，验证通过后直接调用路由跳转方法：

1. 导入useNavigate钩子：

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

2. 在组件内初始化导航方法，并修改登录逻辑：

const navigate = useNavigate();

const handleLoginButton = () => {
  const password = loggedUser.map(({ password }) => password)[0];
  console.log(password);

  if (loggedUser.length === 0) {
    console.log('邮箱错误');
  } else {
    console.log('邮箱正确');

    if (passwordInput === password) {
      console.log('密码也正确！');
      navigate('/home'); // 验证通过直接跳转
    } else {
      console.log('但密码错误');
    }
  }
};

3. 移除Link包裹，按钮直接绑定点击事件：

<LoginButton onClick={handleLoginButton}>Login</LoginButton>

方案2：通过useEffect监听state变化触发跳转 #

如果一定要保留Link的使用方式，可以用useEffect监听linkTo的变化，当状态更新为/home时自动跳转：

1. 导入useNavigate并初始化：

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

const navigate = useNavigate();
const [linkTo, setLinkTo] = useState('/');

2. 添加监听逻辑：

useEffect(() => {
  if (linkTo === '/home') {
    navigate(linkTo);
    // 跳转后重置状态，避免后续误触发
    setLinkTo('/');
  }
}, [linkTo, navigate]);

3. 登录逻辑和按钮代码保持不变（注意修正loggedUser的判断）：

const handleLoginButton = () => {
  const password = loggedUser.map(({ password }) => password)[0];
  console.log(password);

  if (loggedUser.length === 0) {
    console.log('邮箱错误');
    setLinkTo('/');
  } else {
    console.log('邮箱正确');

    if (passwordInput === password) {
      console.log('密码也正确！');
      setLinkTo('/home');
    } else {
      console.log('但密码错误');
      setLinkTo('/');
    }
  }
};

方案3：动态控制Link的有效性 #

可以用条件渲染控制Link是否可点击，只有验证通过后才让Link生效：

{/* 只有验证通过后才渲染可跳转的Link，否则渲染普通按钮 */}
{isLoggedIn ? (
  <Link to="/home">
    <LoginButton>Login</LoginButton>
  </Link>
) : (
  <LoginButton onClick={handleLoginButton}>Login</LoginButton>
)}

这里需要新增isLoggedIn状态，在验证通过时设置为true。

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