使用react-router和expressJS的客户端路由只工作一级
我正在尝试使用react-router来启用客户端路由，但我只能让路由在"/“之后的一个级别上按预期运行。(例如，localhost:8080/工作，localhost:8080/{id}工作，但localhost:8080/vote/{id}不工作)
此外，我正在尝试使用webpack -dev- -p进行本地开发，并使用webpack服务器和expressjs服务器部署到heroku。我的express服务器设置为所有路由都默认为index.html。
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, './dist/index.html'));
});当使用npm start (express server)并尝试导航到localhost:8080/vote/{id}时，控制台显示: SyntaxError: expected，got '<‘，意思是我遇到了类似this issue的情况。然而，当使用webpack-dev-server时，我在控制台中得到了一个不同的错误，它说:加载源为“”的失败。我相信我看到的是同一个核心问题的两个不同的输出，不同的是我的环境或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-localhost:8080/还是我的expressjs服务器。
FWIW我是webdev的新手(到目前为止，我的经验是它是一个cluster-fck)，我不能使用一个完全同构的应用程序，因为我的后端是java/spring，我没有重写我的整个后端。我找到了this post to be helpful，但它不能解决我的问题。请帮帮我这快把我逼疯了。
回答 1
Stack Overflow用户
发布于 2018-10-11 08:36:22
尝试显式设置回退文件：
historyApiFallback:{
index: 'index.html'
}https://stackoverflow.com/questions/52750128
复制相似问题