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>

就会出现错误。错误的结果就是
图片描述

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

阅读 6.8k
1 个回答

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是最简单的.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题