Question

我知道对此有很多问题，但是都没有解决我的问题。我有一个带有React Router <Route path="/login" component={Login} />的React Client应用程序，当用户无法登录我的快递时，我有`

app.post('/login', passport.authenticate('local', {
    successRedirect: '/',
    failureRedirect: '/login',
    failureFlash: true
}))

所以用户停留在/ login上，但是刷新页面时出现错误Cannot GET /login。在网络上进行了很多研究，其中一些人说要创建这样的通配符路由：

 app.use(express.static(path.join(__dirname, '/client/build')));
 app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname, 'client/build/index.html'));
 }); // this is below all other routes

在webpack.config.dev.js中添加了以下代码：

devServer: {
   historyApiFallback: true
}

但是在那之后，我在浏览器控制台中得到了Unexpected token < in 1.fce49d06.chunk.js:1。之后，请阅读有关babel-register来转换我的节点代码的信息，因此我创建了一个新文件start.js，如下所示：

require('babel-register')({
    presets: [ 'env', 'es2015', 'react' ]
})
require("babel-polyfill")

module.exports = require('./index.js');

我也在服务器的package.json中

"scripts": {
   "start": "node start.js",
   "server": "nodemon start.js",
   "client": "npm run start --prefix client",
   "dev": "concurrently \"npm run server\" \"npm run client\""
},

但仍然存在意外令牌<
有任何想法吗？

Answer 1

使用 connect-history-api-fallback 中间件

您可以使用connect-history-api-fallback中间件始终回退到index.html。可以在开发环境和产品环境中使用。

像这样使用它：

const connectHistoryApiFallback = require('connect-history-api-fallback');

... // require other libraries...
... // app.use( other middleware ...

app.use(connectHistoryApiFallback({
  verbose: false
}));

// static files and folders must be set after connectHistoryApiFallback
app.use(express.static(path.join(__dirname, '/client/build')));

... // other routes 

app.post('/login', passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/login',
  failureFlash: true
}))

// app.listen...

React + Express无法获取/登录

1 个答案: