陣營JS - 陣營 - 路由器嵌套路線

Question

我對新的做出反應，我嘗試建立我的第一個應用，路線我用反應路由器，這是我的應用程序

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} />，其實如果我試圖寫/地址/ 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

Answer 1

在你的組件 「集裝箱」 你應該有孩子對象。

你可以更好地看下面的片段。

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;