Дети не определены при использованииот реакции-роутера

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>,
  ]
}

И родительский компонент нижнего колонтитула выглядит так:

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

Похоже, что не нужно использовать любую версию реакции-маршрутизатора выше v4, вложенную, ноЯ не могу понять, почему я сталкиваюсь с этой ошибкой с версией ниже v4

Answer 1

Похоже, вы используете propTypes для объявления типа для children prop вашего компонента Footer, но, поскольку он обрабатывается component prop вашего маршрута, он не получает ничего и вызывает типнесоответствие.Вам нужно либо изменить значение propType, чтобы оно действовало, когда нет детей, либо использовать метод 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>