Redux状态变更后未触发组件重渲染的问题排查求助

核心问题1：登录成功后未执行路由跳转 #

你的登录逻辑仅更新了Redux的isLogged状态，但没有跳转到Home组件所在的/路径。此时浏览器地址仍停留在/login，路由系统会继续渲染Signin组件，而非Home。

修复代码：在登录成功回调中添加路由跳转（React Router v5使用useHistory）：

// 在useSignin钩子中引入并使用useHistory
import { useHistory } from 'react-router-dom';

const useSignin = (): [SigninState, SigninHandlers] => {
    const dispatch = useAppDispatch();
    const history = useHistory(); // 新增

    const handleSubmit: SigninHandlers["handleSubmit"] = (e) => {
        e.preventDefault();
        apis.signin(state.email, state.pwd)
            .then((data) => {
                setState((prevState) => ({ ...prevState, errorMsg: "", successMsg: data.data.message }));
                dispatch(authActions.login());
                history.push('/'); // 登录成功后跳转到根路径
            })
            .catch((e) => {
                setState((prevState) => ({ ...prevState, successMsg: "", errorMsg: e.data.message }));
            })
    }

    return [state, { handleEmailChange, handlePwdChange, handleSubmit }]
}

核心问题2：路由结构嵌套导致匹配逻辑混乱 #

当前/路径渲染App组件，再由App返回PrivateRoute的嵌套写法，容易导致路由匹配逻辑不清晰。建议直接将PrivateRoute放在顶层路由配置中，删除多余的App组件：

修改后的Routes组件：

import PrivateRoute from './PrivateRoute';
import Home from './Home';
import Signin from './Signin';
import Signup from './Signup';
import { Router, Switch, Route } from 'react-router-dom';

export default function Routes() {
  return (
    <Router>
      <Switch>
        <PrivateRoute exact path='/' component={Home} />
        <Route path='/login' component={Signin} />
        <Route path='/register' component={Signup} />
      </Switch>
    </Router>
  );
}

验证与调试步骤 #

1. 检查PrivateRoute的状态订阅：在PrivateRoute中添加日志，确认authenticated是否正确获取Redux状态更新

export default function PrivateRoute({ component: Component, ...rest }) {
  const authenticated = useAppSelector((state) => state.auth.isLogged);
  
  console.log('PrivateRoute 当前登录状态:', authenticated); // 新增日志

  return (
      <Route
        {...rest}
        render={(props) =>
          authenticated ? <Component {...props} /> : <Redirect to={'/login'} />
        }
      />
  );
}

• 如果登录后控制台输出authenticated: true，说明状态订阅正常，问题仅在路由跳转
• 如果输出仍为false，检查RootState类型定义是否正确、authReducer是否已注册到store

2. 验证Home组件渲染情况：在Home组件中添加日志，确认是否被触发

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    console.log('Home组件已渲染');
  }, []);

  return <div>Home Page</div>;
}

3. 确认Redirect功能正常：未登录时访问/，检查是否自动跳转到/login

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