13、React 应用性能优化与路由管理

React 应用性能优化与路由管理

1. React 路由管理

1.1 受保护路由

在 React 应用里，为保证特定内容仅对已认证用户开放，可运用受保护路由。 isAuthenticated 属性当作布尔指标，用于判定用户是否登录。若 isAuthenticated 为 true ，则渲染通过 element 属性传入的组件，让用户访问受保护内容；若为 false ，则借助 Navigate 组件将用户重定向至 /login 页面。

示例代码如下：

<Route
  path="/profile"
  element={<ProtectedRoute isAuthenticated={isLoggedIn} element={<Profile />} />}
/>

在这个例子中，仅当 isLoggedIn 值为 true 时， /profile 路由才可访问。若用户未认证（即 isLoggedIn 为 false ），尝试访问 /profile 路由会自动将其重定向到 /login 页面。

1