React JS - React-Router nested route

Question

I'm new on React and I try to build my first application, for the route I used react-router and this is my App

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <Route path='/' component={Container}>
                    <IndexRoute component={Home}/>
                    <Route path='/address' component={Address}>
                        <IndexRoute component={TwitterFeed} />
                        <Route path='instagram' component={Instagram} />
                        <Route path='query' component={Query} />
                    </Route>
                    <Route path='/about/:name' component={About} /> 
                    <Route path='/namedComponent' component={NamedComponents}>
                        <IndexRoute components={{ title: Title, subTitle: SubTitle }} />
                    </Route>
                    <Route path='*' component={NotFound} />
                </Route>
            </Router>
        )
    }
}

Everything work well but not this line <Route path='/about/:name' component={About} /> , in fact if i try to write /address/12345 white page appears to me whitout error, someone can help me?

This is my webpack.config.js

'use strict';
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');


module.exports = {

    entry: {
        app: [
            './src/main.js'
        ]
    },
    output: {
        path:     __dirname + '/dist',
        publicPath : '/',
        filename: 'bundle.js'
    },
    plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true})
    ] : [],
    devServer: {
        contentBase: "./dist",
        inline:      true,
        port:        3000,
    },
    //source map for js
    devtool: 'source-map',
    module: {
        loaders: [
            //babel ECMAScript 6 compiler
            {
                test:   /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },

            {
                test: /\.scss$/,
                loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ] //sourceMap for debug css in devTools
                /*loader: ExtractTextPlugin.extract({
                    fallback : 'style-loader', use : 'css-loader?sourceMap!sass-loader?sourceMap'
                }) FOR PROD*/
            }
        ]
    },
}

And i use this script : webpack-dev-server --inline --content-base dist --history-api-fallback

Answer 1

In your component "Container" you should have children object.

You can have a better look on the snippet bellow.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const BasicExample = () =>
  <Router>
    <div>
      <ul>
        <Route to="/" component={ComponentThatHaveChildren} />
        <Route path="/path1/path2" component={ChildrenComponent} />
      </ul>
    </div>
  </Router>;

const ComponentThatHaveChildren = props =>
  <div>
    <h1>Component That Have Children</h1>
    <h2>{props.children}</h2>
  </div>;

const ChildrenComponent = () =>
  <div>
    <h2>Children</h2>
  </div>;

export default BasicExample;