使用 react-router 和 expressJS 的客户端路由只能工作一层

Question

我正在尝试使用 react-router 来启用客户端路由，但我只能让路由在“/”之后的一个级别上按预期运行。 （即 localhost:8080/ 有效，localhost:8080/{id} 有效，但 localhost:8080/vote/{id} 无效)

此外，我正在尝试使用 webpack-dev-server 进行本地开发，并使用 webpack -p 和 expressjs 服务器部署到 heroku。我的快递服务器设置为所有路由默认为 index.html。

app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

当使用 npm start（快速服务器）并尝试导航到 localhost:8080/vote/{id} 时，控制台显示：SyntaxError: expected expression, got ' 表示我有一个像this issue 这样的情况。但是，当使用 webpack-dev-server 时，我在控制台中收到一个不同的错误：Loading failed for the with source “http://localhost:8080/vote/bundle.js”。 我相信我看到的是两个不同的相同核心问题的输出，不同之处在于我的环境或 express/webpack-dev-server 提供内容的方式不同。

这是我完整的 expressJS 服务器：

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;

app = express();
// the __dirname is the current directory from where the script is running
app.use('/', express.static(path.resolve(__dirname, 'dist')));

// send the user to index html page inspite of the url
app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

app.listen(port);
console.log("server started on port " + port);

这是我的 webpack.config.js 的相关部分：

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/"
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        historyApiFallback: true
    }

这是我的带有相关路由的 App.js（Home、RealtimeView、PollVote 是自定义 React 组件）：

export default class App extends Component {
    render() {
        return (
            <BrowserRouter history={browserHistory}>
                <div>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/:id" component={RealtimeView} />
                    <Route exact path="/vote/:id" component={PollVote}/>
                </div>
            </BrowserRouter>
        );
    }
}

通过这种配置，我可以可靠地让 localhost:8080/ 工作， localhost:8080/{whatever} 工作，但 localhost:8080/vote /{id} 或任何比 localhost:8080/{something} 更复杂的路由都会失败并出现我前面提到的错误，具体取决于我使用的是 webpack-dev-server 还是我的 expressjs 服务器。

FWIW 我对 webdev 比较陌生（到目前为止，我的经验是它是一个 cluster-fck），我不能使用完全同构的应用程序，因为我的后端是 java/spring 而我不是重写我的整个后端。我找到了this post to be helpful，但它并没有解决我的问题。请帮助这让我发疯。

Answer 1

尝试显式设置后备文件：

historyApiFallback:{
  index: 'index.html'
}