React中如何向PrivateRoute传递props且不影响原有重定向逻辑

你之前的传参写法会让私有路由的校验逻辑完全失效，核心原因有两个：

• 原有PrivateRoute的实现，仅支持通过component属性接收需要渲染的目标组件，完全没有处理「将组件作为子元素嵌套在PrivateRoute标签内部」的场景
• React Router v5 的Route组件存在特殊规则：只要组件收到children属性，无论路径是否匹配、内部写了什么渲染判断逻辑，children内容都会被强制渲染。你之前将<Layout>直接嵌套在<PrivateRoute>标签内时，这个元素会被自动识别为children prop透传给内部的Route组件，直接绕过了PrivateRoute内编写的登录校验、未登录重定向逻辑。

方案1：扩展PrivateRoute支持自定义参数透传（兼容原有写法） #

调整PrivateRoute的参数接收逻辑，在保留原有component传参能力的基础上，增加自定义props的透传通道，不会破坏原有重定向逻辑：

// 改造后的PrivateRoute
export default function PrivateRoute({ component: Component, customProps = {}, ...rest }) {
  const { currentUser } = useAuth()
  return (
    <Route
      {...rest}
      render={(routeProps) => {
        // 原校验逻辑完全保留：登录则合并路由参数+自定义参数渲染目标组件，未登录则重定向
        return currentUser 
          ? <Component {...routeProps} {...customProps} /> 
          : <Redirect to="/landingPage" />
      }}
    />
  )
}

对应使用方式：

// 保持原有路由参数的传参习惯，新增的业务参数通过customProps传入
<PrivateRoute 
  exact 
  path="/" 
  component={Layout} 
  customProps={{ send_id: send_id }}
/>

方案2：支持嵌套子组件的写法 #

如果你更习惯将目标组件嵌套在PrivateRoute标签内部的写法，需要同步调整PrivateRoute的内部逻辑，绝对不能直接将children透传给Route组件：

// 支持嵌套写法的PrivateRoute
export default function PrivateRoute({ children, ...rest }) {
  const { currentUser } = useAuth()
  return (
    <Route
      {...rest}
      render={(props) => {
        // 所有渲染判断都在render回调内完成，不会触发Route的强制渲染规则
        return currentUser 
          ? children 
          : <Redirect to="/landingPage" />
      }}
    />
  )
}

对应使用方式：

<PrivateRoute exact path="/">
  <Layout send_id={send_id} />
</PrivateRoute>

• 绝对不能在不修改PrivateRoute实现的情况下，直接把目标组件嵌套在PrivateRoute标签内——这种写法会自动触发Route的children强制渲染规则，让登录校验逻辑完全失效
• 传参时注意区分路由本身需要的配置（如exact、path）和业务自定义props，不要把业务props混在路由配置的rest展开中，避免影响路由匹配逻辑
• 上述实现基于React Router v5的API编写，如果使用的是v6版本，需要结合<Outlet>的嵌套路由规则实现守卫逻辑，原有的render、children写法在v6中已被废弃

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