React JS - React-Router 嵌套路由答案

【问题标题】：React JS - React-Router nested routeReact JS - React-Router 嵌套路由
【发布时间】：2017-07-31 15:54:29
【问题描述】：

我是 React 新手，我尝试构建我的第一个应用程序，对于我使用 react-router 的路由，这是我的应用程序

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>
        )
    }
}

一切正常，但不是这一行<Route path='/about/:name' component={About} />，事实上，如果我尝试写 /address/12345 白页对我来说似乎没有错误，有人可以帮助我吗？

这是我的 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*/
            }
        ]
    },
}

我使用这个脚本：webpack-dev-server --inline --content-base dist --history-api-fallback

【问题讨论】：

没有路由来处理 /address/12345 你是说 /about/12345 吗？
哦，是的，对不起，我想写 /about/12345
你用什么版本的 react 路由器？
@GiangLe 版本是2.0.1
请edit您的帖子包含您对问题的任何其他信息。避免在 cmets 中添加它，因为它们更难阅读并且更容易删除。帖子的编辑按钮就在帖子标签的下方。

标签： javascript reactjs webpack react-router

【解决方案1】：

在您的组件“容器”中，您应该有子对象。

您可以更好地查看下面的 sn-p。

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;

【讨论】：