React + Express Невозможно получить / войти - PullRequest
Новая
       60

React + Express Невозможно получить / войти

0 голосов
/ 08 ноября 2018

Я знаю, что есть множество вопросов по этому поводу, но ни один из них не устранил мою проблему. У меня есть клиентское приложение реагирования с маршрутизатором реагирования <Route path="/login" component={Login} />, и когда пользователь не может войти в мой экспресс, у меня появляется `

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

так что пользователь остается на / логин, но когда страница обновляется, я получаю ошибку 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');

Также в пакете сервера. Json у меня есть 

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

Но все же есть неожиданный токен <<br> Есть идеи?

1 Ответ

0 голосов
/ 08 ноября 2018

Использовать connect-history-api-fallback middleware

Вы можете использовать промежуточное программное обеспечение 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...
...