React.js登录后useHistory跳转UserContent失效无报错问题求解

问题根源 #

1. 渲染阶段直接修改状态导致登录状态被异常重置

你在Login.js组件的函数体顶部写了如下代码：

if (loggedIn) {
  setLoggedIn(false);
}

这行代码会在组件每次渲染时直接执行：当你提交表单调用setLoggedIn(true)后，父组件App.js的loggedIn状态更新，触发Login组件重新渲染，此时入参loggedIn为true，会立刻执行setLoggedIn(false)将登录状态重置为false，渲染期间直接修改状态会导致React跳过本次更新，跳转逻辑也会被打断。

2. Login组件内部冗余的路由声明冲突

你在Login.js的JSX末尾额外声明了一套<Switch>路由，包含/userContent和/signup的匹配规则。这套内层路由仅在当前路径为/login的子路径时才会生效，和你App.js外层的全局路由规则冲突，干扰路由跳转逻辑。

3. （隐性问题）对象解构写法错误

handleSubmit函数中你用数组解构的方式读取对象类型的formData：const [userName, password] = formData;，这会导致两个变量取值为undefined，后续放开axios校验逻辑时会报错。

修复步骤 #

1. 直接删除Login.js组件顶部的状态重置代码：

if (loggedIn) {
  setLoggedIn(false);
}

如果需要实现退出登录逻辑，将其放到useEffect钩子或者单独的退出按钮点击事件中即可，不要在渲染函数中直接修改状态。

2. 删除Login.js中return语句末尾的整个冗余<Switch>块，即删除以下代码：

<Switch>
  <Route exact={true} path='/userContent'>
    <UserContent />
  </Route>
  <Route exact={true} path='/signup'>
    <SignUpForm />
  </Route>
</Switch>

全局路由已经在App.js中声明完成，不需要在子组件中重复声明。

3. （可选，后续启用校验时需要修改）将handleSubmit中的数组解构改为对象解构：

// 旧写法 错误
const [userName, password] = formData;
// 新写法 正确
const { userName, password } = formData;

修改完成后重新测试，登录跳转逻辑即可正常生效。

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