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 passei o código para lá mas estou recebendo o seguinte erro:
Failed propType: Invalid prop
children
supplied toRouter
. Check the render method ofHeader
.
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?