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

Question

我需要一些关于如何在浏览器历史记录和Webpack中使用React-router的帮助。一切正常，直到我需要使用嵌套路由的时候，那就是当我在我的bundle.js上获得404s。

没有历史记录（带＃中的网址）一切正常，但我宁愿去没有他们。我尽可能使用代理服务器（代码如下），它确实解决了问题，但也意味着我似乎无法使用我需要的所有其他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', 
     }), 
    ], 
    }); 
} 

...这工作正常，但没有使用嵌套路线的能力。这里是再次东西，我试着用节点，得到它的工作，但后来却没用postcss用的WebPack：

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。