为什么我的自定义管线没有传递到子组件的正确路径？

Question

我的App.js文件中有这些路线：

<LoggedInRoute userData={userData} path="/code/:id/view">
  <ViewCode />
</LoggedInRoute>
<LoggedInRoute userData={userData} path="/code/feed/:userId">
  <CodeFeed />
</LoggedInRoute>
// userData -> state representing user session info

这是我的LoggedInRoute组件：

import React from 'react';

import { Redirect, Route } from "react-router-dom";

function LoggedInRoute(props) {
  return (
    <Route
      render={({ location }) =>
        props.userData.id ? (
          props.children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

export default LoggedInRoute;

我正在子组件ViewCode和CodeFeed中使用useParams（）函数（来自react router dom）来生成额外的id和userId。现在的问题是，它们被提取为未定义的值。如果我使用Route而不是LoggedInRoute，一切正常。我的LoggedInRoute组件似乎没有将路径传递给子组件。我从useLocation（）检查了location对象，以及它在子组件中的正确路径。我错过了什么？提前谢谢，伙计们：）

Answer 1

您应该将道具散布到使用自定义道具包裹的管线组件上。

import { Redirect, Route } from "react-router-dom";

function LoggedInRoute(props) {
  return (
    <Route
      ...props
      render={({ location }) =>
        props.userData.id ? (
          props.children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

export default LoggedInRoute;

Answer 2

这解决了我的问题：

import React from 'react';

import { Redirect, Route } from "react-router-dom";

function LoggedInRoute(props) {
  return (
    <Route
      path={props.path}
      render={({ location }) =>
        props.userData.id ? (
          props.children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

export default LoggedInRoute;