CODEWITHSUNDEEP
javascriptreactjsreact-router
Antarktis
Antarktis

Reputation: 163

Children are undefined when using <Route /> from react-router

FYI, I am using version 3.0.0 of react-router.

Currently, I am adding a parent route component that acts as a footer wrapped around child components. While the parent component will render correctly, I keep receiving the error Warning: Failed prop type: The prop `children` is undefined and no children components render. My routes currently look like:

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

And the Footer parent component looks like

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

It seems that any version of react-router above v4, nested should not be used, but I cannot figure out why I am running into this error with a version below v4

Upvotes: 1

Views: 856

Answers (1)

Chris B.
Chris B.

Reputation: 5763

It looks like you're using propTypes to declare a type for the children prop on your Footer component, but since it's being rendered by the component prop of your Route, it is not receiving any and causing a type mismatch. You'd either need to change the propType to be valid when no children are present, or use the render method as Satif suggested in the comments like so:

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

Upvotes: 1

Related Questions