我的反应路由器与dev env工作正常,这是我在webpack dev服务器中所做的:
historyApiFallback: {
index: 'index.html',
}
所以在制作模式中我想做同样的事情,我是这样表达的:
const indexPath = path.join(__dirname, '../public/index.html')
const publicPath = express.static(path.join(__dirname, '../public'))
app.use('/public', publicPath)
app.use('/graphql', graphQLHTTP(async (req) => {
let { user } = await getUser(req.headers.authorization);
if(!user) {
user = 'guest'
}
return {
schema,
pretty: true,
graphiql: true,
context: {
user,
}
}
}));
app.get('/', function (_, res) { res.sendFile(indexPath) });
我没有用react-router-dom改变任何东西,所以我假设错误在我的快速配置中。那么生产模式中的historyApiFallback相当于什么?下面是我的webpack包配置:
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
在我的html中我像这样引用了这个包:
<script type="text/javascript" src="/public/bundle.js"></script>
我认为有一个正确的配置,但是当我重新加载时,我得到GET错误404?
答案 0 :(得分:1)
您应该将此行添加到您的应用中:
app.get('*', function (_, res) { res.sendFile(indexPath) });
或者你应该更好地使用这个包:https://github.com/bripkens/connect-history-api-fallback
您应该阅读有关history
模式的更多信息:
为了摆脱哈希,我们可以使用路由器的历史模式,该模式利用history.pushState API实现URL导航而无需重新加载页面:
使用历史记录模式时,网址会看起来正常,&#34;例如http://oursite.com/user/id。美丽!
但是出现了一个问题:由于我们的应用是单页客户端应用,如果没有正确的服务器配置,如果用户直接在浏览器中访问http://oursite.com/user/id,则会收到404错误。现在那很难看。
不用担心:要解决此问题,您需要做的就是向服务器添加一个简单的全部回退路由。如果网址与任何静态资源不匹配,则该网址应该与您的应用所在的index.html页面相同。再次美丽!