React Router v4表单提交后重定向失效问题求助

嘿，我来帮你排查这个React登录后重定向没触发的问题！你说控制台里state.redirectToReferrer和fakeAuth.isAuthenticated都已经是true了，但页面没跳转，大概率是你没在Login组件里根据这个状态去触发实际的重定向逻辑。我给你几个针对性的解决方案，你可以根据自己的React Router版本来选：

方案1：React Router v6+ 用<Navigate>组件 #

如果你的项目用的是React Router v6及以上版本，原来的<Redirect>组件已经被废弃了，得用<Navigate>来实现跳转。你只需要在组件的render方法里加个状态判断：

首先记得导入组件：

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

然后修改Login组件的render逻辑：

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      portalId: "",
      password: "",
      redirectToReferrer: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    // 这里是你的认证逻辑，比如调用fakeAuth.login
    fakeAuth.login(() => {
      // 认证成功后更新state
      this.setState({ redirectToReferrer: true });
    });
  }

  render() {
    const { redirectToReferrer } = this.state;
    
    // 关键：如果redirectToReferrer为true，就跳转到首页
    if (redirectToReferrer) {
      return <Navigate to="/" replace />;
    }

    return (
      <form onSubmit={this.handleSubmit}>
        {/* 你的portalId输入框、密码输入框、提交按钮 */}
        <input
          type="text"
          value={this.state.portalId}
          onChange={(e) => this.setState({ portalId: e.target.value })}
        />
        <input
          type="password"
          value={this.state.password}
          onChange={(e) => this.setState({ password: e.target.value })}
        />
        <button type="submit">登录</button>
      </form>
    );
  }
}

方案2：转成函数组件用useNavigate钩子 #

如果愿意把类组件改成函数组件，用React Router的钩子会更简洁，不用依赖state来判断：

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

function Login() {
  const [portalId, setPortalId] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    fakeAuth.login(() => {
      // 认证成功直接调用navigate跳转首页
      navigate('/', { replace: true });
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={portalId}
        onChange={(e) => setPortalId(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
}

方案3：React Router v5及以下用<Redirect>组件 #

要是你的项目还在使用React Router v5版本，那可以用旧的<Redirect>组件：

先导入：

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

然后在render里判断：

render() {
  const { redirectToReferrer } = this.state;
  
  if (redirectToReferrer) {
    return <Redirect to="/" />;
  }

  // 剩下的表单渲染逻辑
}

额外检查点 #

除了上面的方案，你还要确认这两个点：

• 你的Login组件是不是被正确包裹在<Routes>（v6）或者<Switch>（v5）组件里面？而且路由配置里有没有正确设置首页的path="/"路由？
• 确认handleSubmit里的setState是在认证完成后才调用的，比如有没有放在fakeAuth.login的回调里，避免异步导致状态更新不及时的问题。

你可以先对照自己的React Router版本选对应的方案试试，应该就能解决重定向的问题啦！

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