从 react-router 使用 <Route /> 时，子级未定义

Question

仅供参考，我使用的是 react-router 3.0.0 版。

目前，我正在添加一个父路由组件，它充当包裹在子组件周围的页脚。虽然父组件将正确呈现，但我不断收到错误 Warning: Failed prop type: The prop `children` is undefined 并且没有子组件呈现。我的路线目前看起来像：

export default(store) => {
return [
<Route
  path=""
  component={Footer}
 >
   <Route
    path="main/intro"
    component={Intro}
   />
   <Route
     path="main/payments"
     component={Payments}
    />
</Route>,
  ]
}

而Footer父组件看起来像

export function Footer({ children }) {
  return (
    <div>
      {children}
      <div className={divStyle}>
        <OpenEmail />
      </div>
      <div className={divStyle}>
        <Menu />
      </div>
    </div>
  );
}

似乎不应该使用任何高于 v4 的 react-router 版本，嵌套，但我不知道为什么我在低于 v4 的版本中遇到此错误

Answer 1

看起来您正在使用 propTypes 为您的 Footer 组件上的 children 属性声明一个类型，但由于它是由您的 Route 的 component 属性呈现的，因此它没有接收任何内容并导致类型不匹配。您要么需要在没有孩子的情况下将 propType 更改为有效，要么使用 cmets 中建议的 render 方法，如下所示：

<Route
  path=""
  render={(props) => <Footer {...props}><div>I am a child</div></Footer>}
 >
   <Route
    path="main/intro"
    component={Intro}
   />
   <Route
     path="main/payments"
     component={Payments}
    />
</Route>