使用React-Router browserHistory，Wepback 2 historyApiFallback和节点

Question

我试图使用React，Node，Wepback 2在本地运行我的React应用程序。每当我点击一条不是/的路线时，我的目标是404。能够运行我的节点服务器，让webpack-dev-server运行，使用browserHistory并返回我的webpack的historyApiFallback工作。

目前做哪些工作：

1. 如果我只是运行webpack-dev-server并没有节点服务器然后browserHistory工作正常，没有404。
2. 如果我用hashHistory运行节点，它工作正常，没有404s。

因此，排除我的路线不工作。下面是一些代码：

server.js

const express = require('express'); 
const expressGraphQL = require('express-graphql'); 
const schema = require('./schema'); 

const app = express(); 

app.use('/graphql', expressGraphQL({ 
    schema, 
    graphiql: true 
})); 

const webpackMiddleware = require('webpack-dev-middleware'); 
const webpack = require('webpack'); 
const webpackConfig = require('../webpack.config.js'); 
app.use(webpackMiddleware(webpack(webpackConfig))); 

app.listen(process.env.PORT || 5000,() => console.log('Listening')); 

---

webpack.config.js

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const VENDOR_LIBS = [ 
    'axios', 'react', 'react-dom', 'react-router', 'react-apollo', 'prop-types' 
]; 

module.exports = { 
    entry: { 
    bundle: './client/src/index.js', 
    vendor: VENDOR_LIBS 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    publicPath: '/', 
    filename: '[name].[chunkhash].js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" 
      }, { 
       loader: "css-loader" 
      }, { 
       loader: "sass-loader" 
      }] 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg|)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: {limit: 40000} 
      }, 
      'image-webpack-loader' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor', 'manifest'] 
    }), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }), 
    new HtmlWebpackPlugin({ 
     template: './client/src/index.html' 
    }) 
    ], 
    devServer: { 
    historyApiFallback: true 
    } 
}; 

---

routes.js

import React from 'react'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

import App from './components/App'; 
import Portal from './components/portal/Portal'; 

const componentRoutes = { 
    component: App, 
    path: '/', 
    indexRoute: { component: Portal }, 
    childRoutes: [ 
    { 
     path: 'home', 
     getComponent(location, cb) { 
     System.import('./components/homepage/Home') 
      .then(module => cb(null, module.default)); 
     } 
    } 
    ] 
}; 

const Routes =() => { 
    return <Router history={ browserHistory } routes={ componentRoutes } /> 
}; 

export default Routes; 

同样，目标是能够在本地启动我的节点服务器，使用browserHistory而不是404s。我不想使用hashHistory，我需要使用我的节点服务器，所以我可以使用graphql。我也不想回到webpack v1。虽然这里是一个链接到人们得到它在第一版的工作：

historyApiFallback doesn't work in Webpack dev server

Answer 1

的historyApiFallback选项是专门为webpack-dev-server。如果您正在运行自己的服务器，即使使用webpack-dev-middleware，也需要将其配置为在出现404时发送index.html。因为您正在使用html-webpack-plugin，您要发送的index.html在您的文件系统上不存在，但仅在内存中存在。要使其工作，您可以访问webpack编译器的输出，如comment of html-webpack-plugin #145中所示。

server.js

const path = require('path'); 
const express = require('express'); 
const expressGraphQL = require('express-graphql'); 
const schema = require('./schema'); 

const app = express(); 

app.use('/graphql', expressGraphQL({ 
    schema, 
    graphiql: true 
})); 

const webpackMiddleware = require('webpack-dev-middleware'); 
const webpack = require('webpack'); 
const webpackConfig = require('../webpack.config.js'); 
const compiler = webpack(webpackConfig); 

app.use(webpackMiddleware(compiler)); 
// Fallback when no previous route was matched 
app.use('*', (req, res, next) => { 
    const filename = path.resolve(compiler.outputPath, 'index.html'); 
    compiler.outputFileSystem.readFile(filename, (err, result) => { 
    if (err) { 
     return next(err); 
    } 
    res.set('content-type','text/html'); 
    res.send(result); 
    res.end(); 
    }); 
}); 

app.listen(process.env.PORT || 5000,() => console.log('Listening'));