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.

Answer 2

this.props.children is a property automatically set by React on a component that contains the children of that component. You can use react-router without putting this.props.children.

In your case this.props.children in the App.js component corresponds to the content that's put inside the <App /> tag in your application. If there is no <App /> tag, then no children were put inside and only the render from App.js will be generated.

Answer 3

Here is a complete example using nested routes for ReactSpeed.com.

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={HomePage}>
      <IndexRoute component={CardStack} />
      <Route path="/roadmap" component={Roadmap} />
      <Route path="/ajax" component={CardStackAjax} />
      <Route path="/infographics" component={CardStackInfo} />
      <Route path="/media" component={CardStackMedia} />
      <Route path="/forms" component={CardStackForm} />
      <Route path="/buttons" component={CardStackButton} />
      <Route path="/blog" component={PostSummary} />
      <Route path="/blog/:slug" component={PostDetail} />
    </Route>
    <Route path="*" component={HomePage}>
      <IndexRoute component={MissingRoute} />
    </Route>
  </Router>,
  document.getElementById('app')
);

The HomePage component rendering props.children is also listed on GitHub. The routes are defined in index.jsx available on GitHub here. All the nested components are also listed on GitHub.

Answer 4

Yes, You need to use the {this.props.children} in the app.js file in order to display the child routing pages.Because you set app.js is the index route in Router path="/". It will display the app.js data in the home page and when you navigate to next child page then it also display the app.js data and the child page data in the same page. It will be useful when you want to reuse the components like Header navigation menu for displaying the same header in all pages without recreating the header component.