UPDATEreact-router-4 has changed in that it no longer has children. However, with the Route component you can render anything that matches the path.

<Router>  <div>    <ul>      <li><Link to="/">Home</Link></li>      <li><Link to="/about">About</Link></li>      <li><Link to="/contact">Contact</Link></li>    </ul>    <hr/>    // All 3 components below would be rendered when in a homepage    <Route exact path="/" component={Home}/>    <Route exact path="/" component={About}/>    <Route exact path="/" component={Contact}/>    <Route path="/about" component={About}/>    <Route path="/contact" component={Contact}/>  </div></Router>

This means that if you want a wrapper, you can write it inside the component.

react-router & no IndexRoute any more

<Route exact path="/" component={Home}/> equal to <IndexRoute component={Home}/>

// Switch<Route path="/about" component={About}/><Route path="/:user" component={User}/><Route component={NoMatch}/>import { Switch, Route } from 'react-router'<Switch>    <Route exact path="/" component={Home}/>    <Route path="/about" component={About}/>    <Route path="/:user" component={User}/>    <Route component={NoMatch}/></Switch>/* there will only ever be one child here */<Fade>    <Switch>        <Route/>        <Route/>    </Switch></Fade><Fade>    <Route/>    <Route/></Fade>/* there will always be two children here, one might render null though, making transitions a bit more cumbersome to work out */

refs

https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220

https://reacttraining.com/react-router/web/api/Switch

I don't know if this helps but these are the codes that I used.

File Structure:

src

-index.js

-app(folder)

--components(folder)

---Header.js

---Home.js

---Root.js

---User.js

src/app/index.js

import React, {Component} from  "react";import { render } from "react-dom";import { browserHistory} from "react-router";import { BrowserRouter as Router, Route, IndexRoute} from "react-router-dom";import Root from "./components/Root";import Home from "./components/Home";import User from "./components/User";class App extends Component {  render() {    return (        <Router history={browserHistory}>            <div>                <Root>                    <Route exact path={"/"} component={Home} />                        <Route path={"/user"} component={User} />                        <Route path={"/home"} component={Home} />                </Root>            </div>        </Router>    )  }}render (<App />, window.document.getElementById("app"));

src/app/components/Root.js

import React, {Component} from "react";import { render } from "react-dom";import Header from "./Header";import Home from "./Home";class Root extends Component{    render(){        let renderData;        renderData = (            this.props.children        );        return(            <div>                <div className="container">                    <div className="row">                        <div className="col-xs-10 col-xs-offset-1">                            <Header/>                        </div>                    </div>                    <div className="row">                        <div className="col-xs-10 col-xs-offset-1">                            {renderData}                        </div>                    </div>                </div>            </div>        );    }}export default Root;

src/app/components/Home.js

import React, {Component} from "react";class Home extends Component{    render(){        return(            <div>                <p>{this.props.isExist}</p>                <h2>Home</h2>            </div>        );    }}export default Home;

src/app/components/User.js

import React, {Component} from "react";class User extends Component{    render(){        return(            <div>                <h3>The user page</h3>                <p>User ID:</p>            </div>        );    }}export default User;

webpack.config.js

var webpack = require("webpack");var path = require("path");var DIST_DIR = path.resolve(__dirname, "dist");var SRC_DIR = path.resolve(__dirname, "src");var config = {    entry: SRC_DIR + "/app/index.js",    output: {        path: DIST_DIR + "/app",        filename: "bundle.js",        publicPath: "/app/"    },    module:{        loaders: [            {                test: /\.js?/,                include: SRC_DIR,                loader: "babel-loader",                query:{                    presets: ["react", "es2015", "stage-2"]                }            }        ]    }};module.exports = config;