javascript - react-router children not propagating -

i trying use react-router not able propagate children components.

index.js 

import 'babel-polyfill';  import react 'react';  import { render } 'react-dom';  import { router, route, browserhistory } 'react-router';    import app './app';    import login './containers/login';    const rootelement = document.getelementbyid('app');    render((  	<router history={browserhistory}>  		<route path="/" component={app}>  			<route path="login" component={login}/>  		</route>  	</router>  ), rootelement);

app.js 

import react, { component, proptypes } 'react';  import { login } './containers';    export default class app extends component {    	constructor(props) {  		super(props);  	}    	render() {  		const { children } = this.props;  		return (  			<div classname="content">  				{children}  			</div>  		);  	}  }    app.proptypes = {  	children: proptypes.any,  };

loginpage.js 

import react, { component, proptypes } 'react';  import { connect } 'react-redux';    import { login } '../components';    export default class loginpage extends component {    	constructor(props, context) {  		super(props, context);  	}    	handlesubmit(event) {  		event.preventdefault();  	}    	render() {  		const { handlesubmit, redirect } = this.props;  		return (  			<login handlesubmit={handlesubmit}  			       redirect={redirect}  			/>  		);  	}  }

logincomponent.js 

import react, { component, proptypes } 'react';    export default class login extends component {    	constructor(props, context) {  		super(props, context);    		this.state = {  			email: '',  			password: '',  		};  	}    	handlechange(field, event) {  		const nextstate = this.state;    		nextstate[field] = event.target.value;    		this.setstate(nextstate);  	}    	handlesubmit(event) {  		event.preventdefault();    		this.props.handlesubmit(this.state);  	}    	render() {  		return (  			<form onsubmit={event => this.handlesubmit(event)}>  				<input  					type="text" placeholder="email"  					value={this.state.email}  					onchange={this.handlechange.bind(this, 'email')}  				/>  				<input  					type="password" placeholder="password"  					value={this.state.password}  					onchange={this.handlechange.bind(this, 'password')}  				/>  				<input type="submit" value="submit"/>  			</form>  		);  	}  }    login.proptypes = {  	handlesubmit: proptypes.func.isrequired,  };

if import loginpage directly app.js try render {children} works fine. on inspection says children undefined

react@0.14.6

react-dom@0.14.6

react-router@2.0.0-rc5

as side note, ran npm list react-router , got back

`-- (empty)  npm err! code 1 

any great!!

edit: edited first code snippet import login './containers/login'; import { login } './containers/login';

that type simplifying problem. had other way because using index.js containers , calling import { login } './containers';

i have stepped through code , shows login not undefined in index.js children when app.js

below screenshot of breakpoint in index.js , app.js in same run. index.js shows login being initialized children undefined.

[

okay have simplified whole thing as possible single file , still doesn't work

import 'babel-polyfill';  import react, { component } 'react';  import { render } 'react-dom';  import { router, route, browserhistory } 'react-router';    class app extends component {    	constructor(props) {  		super(props);  	}    	render() {  		const { children } = this.props;  		return (  			<div classname="content">  				{children}  			</div>  		);  	}  }    class child extends component {  	render() {  		return (  			<p>i child</p>  		);  	}  }    const rootelement = document.getelementbyid('app');    render((  	<router history={browserhistory}>  		<route path="/" component={app}>  			<route path="login" component={child}/>  		</route>  	</router>  ), rootelement);

i ran , got following

then added <child /> directly render property of app , got this

so not problem how importing files etc.

the solution quite simple. replace

import { login } './containers/login'; 

with

import  login  './containers/login'; 

in index.js

the reason why child property 'undefined' because passed on component 'undefined':

if have questions regarding import syntax can recommend question "using brackets javascript import syntax"

see full code: index.js

import react 'react'; import { render } 'react-dom'; import { router, route, browserhistory } 'react-router';  import app './app'; import login './containers/loginpage';  const rootelement = document.getelementbyid('app');  render((     <router history={browserhistory}>         <route path="/" component={app}>             <route path="login" component={login}/>         </route>     </router> ), rootelement); 

app.js

import react, { component, proptypes } 'react';  export default class app extends component {      constructor(props) {         super(props);     }      render() {         const { children } = this.props;         return (             <div classname="content">                 {children}             </div>         );     } }  app.proptypes = {     children: proptypes.any, }; 

./containers/loginpage.js

import react, { component, proptypes } 'react'; import { connect } 'react-redux';  import login '../components/login';  export default class loginpage extends component {      constructor(props, context) {         super(props, context);     }      handlesubmit(event) {         event.preventdefault();     }      render() {         const { handlesubmit, redirect } = this.props;         return (             <login handlesubmit={handlesubmit}                    redirect={redirect}             />         );     } } 

./components/login.js

import react, { component, proptypes } 'react';  export default class login extends component {      constructor(props, context) {         super(props, context);          this.state = {             email: '',             password: '',         };     }      handlechange(field, event) {         const nextstate = this.state;          nextstate[field] = event.target.value;          this.setstate(nextstate);     }      handlesubmit(event) {         event.preventdefault();          this.props.handlesubmit(this.state);     }      render() {         return (             <form onsubmit={event => this.handlesubmit(event)}>                 <input                     type="text" placeholder="email"                     value={this.state.email}                     onchange={this.handlechange.bind(this, 'email')}                 />                 <input                     type="password" placeholder="password"                     value={this.state.password}                     onchange={this.handlechange.bind(this, 'password')}                 />                 <input type="submit" value="submit"/>             </form>         );     } }  login.proptypes = {     handlesubmit: proptypes.func.isrequired, }; 

proof react 0.14.6 , react-router 2.0.0-rc5