不能在 React-Router 和 Webpack 中使用嵌套路由

Question

我需要一些关于如何使用带有浏览器历史记录和 Webpack 的 React-router 的帮助。一切正常，直到我需要使用嵌套路由时，我的 bundle.js 上出现 404。

没有历史记录（url 中带有#s）一切正常，但我宁愿不使用它们。我尽可能使用代理服务器（下面的代码），它确实解决了问题，但也意味着我似乎无法使用我需要的所有其他 Webpack 东西（如 postcss 等）。至少我不知道怎么做。

所以我真的很想让这个东西使用 Webpack 来处理我的 postcss、React-router 以及漂亮干净的 url 和嵌套路由。到目前为止看起来不太有希望......

这是我的 webpack 配置文件（es6 语法）：

import path from 'path';
import HtmlwebpackPlugin from 'html-webpack-plugin';
import merge from 'webpack-merge';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

import postcssImport from 'postcss-import';
import nested from 'postcss-nested';
import mqpacker from 'css-mqpacker';
import cssnext from 'postcss-cssnext';

const TARGET = process.env.npm_lifecycle_event;
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'public');

const common = {
  entry: [
    APP_PATH + '/App.js',
  ],
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
      },
      {
        test: /\.css$/,
        /* loader: 'style-loader!css-loader!postcss-loader',*/
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader'),
      },
    ],
  },
  postcss: function(webpack) {
    return [
      postcssImport({
        addDependencyTo: webpack,
      }),
      nested,
      mqpacker,
      cssnext(),
    ];
  },
};

if (TARGET === 'dev' || !TARGET) {
  module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
    },
    plugins: [
      new ExtractTextPlugin('app.css'),
      new HtmlwebpackPlugin({
        title: 'Hohohohoho',
        template: BUILD_PATH + '/index.html',
        inject: 'body',
      }),
    ],
  });
}

...工作正常，但无法使用嵌套路由。这又是我在 node 上尝试过的东西并让它工作了，但是在 webpack 中使用 postcss 失败了：

require('babel/register')({});
var server = require('pushstate-server');

server.start({
  port: process.env.PORT || 8090,
  directory: './public'
});

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

var compiler = webpack(process.argv[2] == 'hot' ? require('./webpack.config.hot.js') : require('./webpack.config.babel.js'));
var devServer = new WebpackDevServer(compiler, {

  stats: {colors: true},
  contentBase: 'http://localhost:8090/',
  publicPath: 'http://localhost:8080/js/',

  hot: process.argv[2] == 'hot'
});

devServer.listen(8080, "localhost", function() {})

有人告诉我使用 historyApiFallback 但这似乎并没有改变任何东西，但它仍然存在于 webpack 选项中。

Answer 1

您需要做的就是将history 参数添加到您的路由器：

import React from 'react'
import { render } from 'react-dom'
import { Router } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const history = createBrowserHistory()

render((
  <Router history={history}>
    {/* some routes */}
  </Router>
), document.getElementById('root'));

有关createBrowserHistory() 的更多信息，请参阅文档。

确保您已安装 history 模块：npm install history。