React-router-dom v6中ProtectedRoute不生效/account页空白问题

react-router-dom v6 路由匹配规则为同路径平级路由仅匹配最先声明的条目，当前代码中存在两个path="/account"的平级路由：

• 第一条路由匹配到的元素为<ProtectedRoute/>，组件内部通过<Outlet/>渲染嵌套子路由，但该路由未配置任何子路由，<Outlet/>无内容可渲染，对应区域直接空白
• 第二条配置<Profile/>的/account路由因路径与前序路由完全重复，永远不会被路由系统匹配，组件不会挂载
  接入权限控制前Profile直接作为/account的匹配元素可以正常渲染，拆分平级重复路由后才出现空白问题，和上述规则完全吻合。

调整/account路由为嵌套结构，将Profile作为ProtectedRoute的子路由，删除重复的平级同路径路由配置。
修正后App.js中Routes部分代码如下：

<Routes>
  <Route exact path="/" element={<Home/>}/>
  <Route exact path="/product/:id" element={<ProductDetails/>}/>
  <Route exact path="/products" element={<Products/>}/>
  <Route path="/products/:keyword" element={<Products/>}/>
  <Route exact path="/search" element={<Search/>}/>
  {/* 权限路由作为父级，Profile作为嵌套子路由通过Outlet渲染 */}
  <Route exact path="/account" element={<ProtectedRoute/>}>
    <Route index element={<Profile/>}/>
  </Route>
  <Route exact path="/login" element={<LoginSignUp/>}/>
</Routes>

嵌套配置后，权限校验通过时<Outlet/>会自动渲染子路由的<Profile/>组件，校验不通过时正常跳转登录页，符合预期。

当前逻辑存在首次加载鉴权误跳转问题：App初始化后才触发loadUser()拉取用户登录状态，Redux中isAuthenticated初始值通常为false，若用户本地存有有效登录凭证，接口返回前ProtectedRoute会误判定为未登录跳转至登录页。
可在ProtectedRoute中增加加载状态判断，优化体验：

// ProtectedRoute.js 修正后代码
import React from "react";
import { useSelector } from "react-redux";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  const {isAuthenticated, loading} = useSelector((state)=>state.user)
  // 鉴权状态加载中时渲染占位，不做放行/跳转判断
  if (loading) {
    return <div>加载中...</div>
  }
  // 跳转时加replace避免登录后回退到登录页
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />
}

export default ProtectedRoute;

另外Profile组件内部写的未登录跳转逻辑和ProtectedRoute功能完全重复，可以直接删除，减少冗余判断。

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