不能在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。