Question

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

当前，我正在添加一个父路由组件，它充当包裹子组件的页脚。尽管父组件将正确呈现，但我一直收到错误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>,
  ]
}

页脚父级组件看起来像

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 prop声明一个类型，但是由于它是由Route的component prop渲染的，因此它没有收到任何内容并导致类型不匹配。您可能需要将propType更改为在不存在任何子代时有效，或者使用render方法，如Satif在注释中建议的那样：

<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>

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

1 个答案: