React Router v6 路由重定向与状态同步的正确实践

本文详解 react router v6 中 Navigate 组件的正确用法，解决因误用 导致白屏及 Cannot destructure Property ‘loggedIn’ of ‘user’ as it is NULL 等典型错误，并提供状态派生、条件渲染与路由守卫的完整解决方案。

本文详解 react router v6 中 `navigate` 组件的正确用法，解决因误用 `` 导致白屏及 `cannot destructure property ‘loggedin’ of ‘user’ as it is null` 等典型错误，并提供状态派生、条件渲染与路由守卫的完整解决方案。

在使用 React Router v6 构建受保护路由（如登录后跳转至电影列表页）时，一个常见误区是试图通过 实现重定向——这不仅无效，还会导致组件意外渲染、状态未就绪而引发运行时错误（如对 null 对象解构）。上述问题中出现的白屏和 TypeError: Cannot destructure property ‘loggedIn’ of ‘user’ as it is null，本质源于两处关键错误：

1. 错误使用 作为重定向元素： 是 v5 的写法，在 v6 中已废弃；v6 的 不再支持 to 属性，且其 element prop 必须接收一个可渲染的 React 元素（如 ），而非另一个 组件；
2. loggedIn 与 user 状态不同步：loggedIn 被独立声明为 useState(false)，但逻辑上它应完全由 user 是否存在决定。当 user 为 null 而 loggedIn 为 true 时，MovieList 接收 user={null}，解构 const { loggedIn } = user 自然抛出错误。

✅ 正确做法：使用 + 派生状态

首先，导入 Navigate 组件（v6 内置，无需额外安装）：

import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';

接着重构 App.js 中的路由配置，严格区分“渲染”与“重定向”行为：

// App.js（修正后核心片段） const App = () => {   const [user, setUser] = useState(null);    // ✅ 派生状态：isLoggedIn 完全由 user 决定，避免不一致   const isLoggedIn = useMemo(() => !!user, [user]);    const handleLogin = async (username, password) => {     const users = await fetchUsers();     const matchedUser = users.find(       (u) => u.username === username && u.password === password     );     if (matchedUser) {       setUser(matchedUser); // ✅ 同时设置 user 和派生的 isLoggedIn     } else {       alert('Invalid credentials');     }   };    const handleLogout = () => setUser(null);    return (     <Router>       <Routes>         {/* 登录页：未登录时显示，已登录则重定向 */}         <Route            path="/"            element={isLoggedIn ? <Navigate to="/movies" replace /> : <Login onLogin={handleLogin} />}          />          {/* 电影页：仅在已登录时渲染，并确保 user 非 null */}         <Route            path="/movies"            element={isLoggedIn ? <MovieList user={user} onLogout={handleLogout} /> : <Navigate to="/" replace />}          />       </Routes>     </Router>   ); };

? 关键要点：

• 是 v6 唯一推荐的声明式重定向方式，replace 可防止用户点击返回按钮回到登录页（可选）；
• isLoggedIn 使用 useMemo 派生，语义清晰（建议命名以 is 开头），彻底消除 user 与 isLoggedIn 不同步的风险；
• 所有受保护路由（如 /movies）的 element 必须保证：当条件为真时，传入的 props（如 user）是有效值。

?️ 进阶防护：在 MovieList 中增加运行时校验（防御性编程）

即使路由层已做保护，仍建议在 MovieList 组件内添加轻量级校验，提升健壮性：

// MovieList.jsx const MovieList = ({ user, onLogout }) => {   // ✅ 防御性检查：user 必须存在才继续   if (!user) {     return <div className="loading">Loading user data...</div>;   }    const { username, email } = user; // ✅ 此时解构安全    return (     <div>       <h2>Welcome, {username}!</h2>       <p>Email: {email}</p>       <button onClick={onLogout}>Logout</button>       {/* 其他电影列表逻辑... */}     </div>   ); };

⚠️ 注意事项总结

• ❌ 禁止在 element 中写 —— 这会尝试渲染一个本不存在的 Route 组件，直接报错；
• ✅ 重定向只用 ，跳转页面用 或 useNavigate()；
• ✅ isLoggedIn / isAuthenticated 等布尔状态应始终从核心数据（如 user）派生，而非独立维护；
• ✅ 在接收 user 的子组件中，优先校验 user != null，再进行解构或渲染，避免 “Cannot destructure property of null”；
• ✅ 开发时启用 React Strict Mode，有助于提前发现状态不一致和副作用问题。

遵循以上实践，即可彻底解决白屏、重定向失效及空值解构异常等问题，构建出稳定、可维护的受保护路由系统。