我正在尝试使用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,但它不能解决我的问题。请帮帮我这快把我逼疯了。
发布于 2018-10-11 08:36:22
尝试显式设置回退文件:
historyApiFallback:{
index: 'index.html'
}
https://stackoverflow.com/questions/52750128
复制相似问题