Skip to main content
3 de 4
removida tag do titulo
jpmnteiro
  • 6,2mil
  • 3
  • 31
  • 41

Failed propType: Invalid prop `children` supplied to `Router`

Criei um projeto para estudar react e estou tentando desacoplar o meu Header do app criando um componente para ele. Criei um arquivo Header.jsx e passe o código para lá mas estou recebendo o seguinte erro:

Failed propType: Invalid prop children supplied to Router. Check the render method of Header.

Header.jsx

import React, { Component, PropTypes } from 'react';
import Link from 'react-router';
import { Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

const activeClassName = 'active';

class Header extends Component{
  render() {
    <div>
      <Header title="React SaaS" scroll>
        <Navigation>
          <Link activeClassName={activeClassName} to="/home">Home</Link>
          <Link activeClassName={activeClassName} to="/login">Login</Link>
        </Navigation>
      </Header>
      <Drawer title="React SaaS">
        <Navigation>
          <Link to="/home">Home</Link>
          <Link to="/login">Login</Link>
        </Navigation>
      </Drawer>
    </div>
  }
};

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]),
};

export default Header;

app.jsx

import React from 'react';
import ReactDOM from 'react-dom'
import Router from 'react-router';
import { IndexRoute, Link, Route } from 'react-router';
import ReactMDL from 'react-mdl';
import { Layout , Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

import Header from './components/Header.jsx';
import Login from './components/Login.jsx';
import Home from './components/Home.jsx';

class App extends React.Component{
  render() {
    return (
      <div className="big-content" style={{height: '300px', position: 'relative'}}>
        <Layout>
          <Header />
          <div className="wrapper">
              {this.props.children}
          </div>
        </Layout>
      </div>
    )   ;
  }
};

let routes = (
  <Route path="/" component={App}>
    <Route path="home" component={Home}/>
    <Route path="login" component={Login}/>
  </Route>
);

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'))

Alguma ideia do que está acontecendo?

jpklzm
  • 3mil
  • 4
  • 21
  • 37