React 0.14 - using react-router

Question

The following is my code. The app.js is the root file, about.js is a file displaying just some text, and index.js handles all the routes by using react-router. I want to render my about.js within app.js. It does not render if I don't write "this.props.children" within app.js.

App.js - The root file which renders all the child componets within it.

"use strict";

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {
  render() {
    console.log(this.props.children)
    return(
        <div>
            <h1>Hello !</h1>
            <Link to="about">About</Link>
            {this.props.children} **//Is this necessary?**
        </div>
    ) 
  }
}
export default App;

About.js

"use strict";

import React from 'react';

class About extends React.Component {
  render() {
    return(
        <div>
            <h1>About page!</h1>
        </div>
    )
  }
}
export default About;

Index.js - File handling the routes

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router'

/*Require own custom files*/
import App from './app';
import About from './about';

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

I am working in React 0.14 with ecma6. In order to use react-router, is it necessary to write "this.props.children" in the root component? If so, why? Is there any other way to implement react-router?

Answer 1

Yes, it is required to have this.props.children.

In your index.js you have defined your routes as nested. If you declare about route inside your /, then you have to render about page as child of App. If you do not want to call this.props.children in App then make them separate same level routes but you lose the ability to use it as part of App.

React router basically passes the About component as a child to the App as per your definition of the routes. If you do not use this.props.children you can't do it.

If you have other pages in your applicaiton like about page or index page. They will also not render without use of this.props.children.