本文详解 React Router v6 中 Navigate 组件的正确用法，解决因误用 <Route to="..."/> 导致白屏及 Cannot destructure property 'loggedIn' of 'user' as it is null 等典型错误，并提供状态派生、条件渲染与路由守卫的完整解决方案。
本文详解 react router v6 中 `navigate` 组件的正确用法，解决因误用 `
在使用 React Router v6 构建受保护路由（如登录后跳转至电影列表页）时，一个常见误区是试图通过 <Route to="/xxx" /> 实现重定向——这不仅无效，还会导致组件意外渲染、状态未就绪而引发运行时错误（如对 null 对象解构）。上述问题中出现的白屏和 TypeError: Cannot destructure property 'loggedIn' of 'user' as it is null，本质源于两处关键错误：
- 错误使用 <Route> 作为重定向元素：<Route to="/movies" /> 是 v5 的写法，在 v6 中已废弃；v6 的 <Route> 不再支持 to 属性，且其 element prop 必须接收一个可渲染的 React 元素（如 <Login />），而非另一个 <Route> 组件；
- loggedIn 与 user 状态不同步：loggedIn 被独立声明为 useState(false)，但逻辑上它应完全由 user 是否存在决定。当 user 为 null 而 loggedIn 为 true 时，MovieList 接收 user={null}，解构 const { loggedIn } = user 自然抛出错误。
✅ 正确做法：使用 <Navigate /> + 派生状态
首先，导入 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>
);
};? 关键要点：
- <Navigate to="/movies" replace /> 是 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 to="..." /> —— 这会尝试渲染一个本不存在的 Route 组件，直接报错；
- ✅ 重定向只用 <Navigate />，跳转页面用 <Link /> 或 useNavigate()；
- ✅ isLoggedIn / isAuthenticated 等布尔状态应始终从核心数据（如 user）派生，而非独立维护；
- ✅ 在接收 user 的子组件中，优先校验 user != null，再进行解构或渲染，避免 “Cannot destructure property of null”；
- ✅ 开发时启用 React Strict Mode，有助于提前发现状态不一致和副作用问题。
遵循以上实践，即可彻底解决白屏、重定向失效及空值解构异常等问题，构建出稳定、可维护的受保护路由系统。
