useNavigate跳转Login页后空白，URL正确却未加载的问题

问题根源 #

点击登出后，Firebase的signOut会触发onAuthStateChanged回调，把currentUser设为null。但UserProfile组件直接渲染currentUser.email，没有做空值判断，导致抛出Cannot read properties of null (reading 'email')的错误，组件渲染失败，进而让路由跳转后的Login页面无法正常加载，出现空白。刷新页面后，路由直接加载Login组件，不会触发UserProfile的渲染，所以页面恢复正常。

修复方案 #

1. 给UserProfile组件添加空值判断

最简单的方式是在访问currentUser的属性时使用可选链操作符，或者直接做条件渲染：

方式一：使用可选链
修改UserProfile中显示邮箱的代码：

<p>{currentUser?.email}</p>

这样当currentUser为null时，不会抛出错误，只会显示空内容。

方式二：条件渲染完整内容
如果需要在用户未登录时隐藏整个Profile内容，可以包裹一层条件判断：

return (
  <div className="container profile">
    {currentUser ? (
      <div className="profile">
        <h1>Profile</h1>
        {errorMessage && (
          <div className="error-container">
            <strong>{errorMessage}</strong>
          </div>
        )}
        <div className="row">
          <h3>Email</h3>
          <p>{currentUser.email}</p>
        </div>
        <div className="row">
          <a>Change email</a>
        </div>
        <div className="row">
          <a>Reset password</a>
        </div>
        <button onClick={handleLogout}>Logout</button>
      </div>
    ) : (
      <div>Redirecting...</div>
    )}
  </div>
)

2. 添加路由保护（推荐）

创建一个PrivateRoute组件，确保只有登录用户才能访问UserProfile这类需要权限的页面：

// components/PrivateRoute.js
import { Navigate } from 'react-router-dom'
import { useAuth } from '../services/authContext'

export default function PrivateRoute({ children }) {
  const { currentUser } = useAuth()
  // 如果没有登录，直接跳转到登录页
  return currentUser ? children : <Navigate to="/login" replace />
}

然后在路由配置中用PrivateRoute包裹UserProfile：

// App.js或路由配置文件
import { Routes, Route } from 'react-router-dom'
import UserProfile from './components/UserProfile'
import Login from './components/Login'
import PrivateRoute from './components/PrivateRoute'

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/profile" element={
        <PrivateRoute>
          <UserProfile />
        </PrivateRoute>
      } />
      {/* 其他路由 */}
    </Routes>
  )
}

这样登出后，currentUser变为null，PrivateRoute会自动跳转到Login页，同时UserProfile组件不会被渲染，从根源避免了空值报错。

额外小修复

Login组件中的提交按钮type属性写错了，应该从type="submit1"改成type="submit"，否则表单可能无法正常提交：

<button disabled={loading} className="button-block" type="submit">
  Login
</button>

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