Question

我是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} />，事实上如果我尝试写/地址/ 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;

React JS - React-Router嵌套路由

1 个答案: