首页 > webpack 打包时 如果存在react-router子路由页面就会出错

webpack 打包时 如果存在react-router子路由页面就会出错

我正常使用webpack打包程序,入口文件运行正确。如下:

路由:

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <Route path="about" component={About} />
    </Route>
</Router>

webpack配置

module.exports = {
    entry: {
        pc: path.resolve(__dirname,'pc.js'),
        vendor: ['react']
    },

    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: '[name].js'
    },

    resolve: {
        extentions: ['', 'js', 'jsx']
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin({
        //     compress: {
     //        warnings: false
     //    }
        // }),
        ExtractLess,
        HtmlPlugin,
        new webpack.optimize.CommonsChunkPlugin('vendor', 'js/react.js')
    ],
    module: {
        loaders: [
            {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        },
            {
          test: /\.js|jsx?$/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['react','es2015']
          }
        },
        {
            test: /\.png|jpg$/,
            loader: 'file-loader?limit=10240'
        }
        ]
    }
};

这种情况下可以正确的运行程序。但是如果我加上子路由,就会出错如下:

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <Route path="about/:id" component={About} />
    </Route>
</Router>

或者是

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <Route path="about" component={About}>
            <Route path=":id" component={AboutDetail} />
        </Route>
    </Route>
</Router>

就会出现错误。错误的结果就是

求助大神,在线等,急!!


browserHistory需要对Web服务器进行配置。你可以先用hsahHistory来代替browserHistory。

更新
browserHistory的文档:
https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#browserhistory

browserHistory

Browser history is the recommended history for browser application with React Router. It uses the History API built into the browser to manipulate the URL, creating real URLs that look like example.com/some/path.

Configuring Your Server

Your server must be ready to handle real URLs. ......

文档里面写的还是挺清楚的, 如果要使用broswerHistory, 你的server必须进行设置. 按着文档里面的做应该不会有问题, 里面讲到的几种方法中nginx是最简单的.

【热门文章】
【热门文章】