Экспресс-сервер перенаправления на React Router 404 не найден - PullRequest
Новая
       16

Экспресс-сервер перенаправления на React Router 404 не найден

0 голосов
/ 18 октября 2018

Я создаю приложение React с использованием Express Server на бэкэнде и использовал Create React App для внешнего интерфейса.Я использую Параллельно для запуска обоих серверов (http://localhost:5000) и frontend (http://localhost:3000)) во время разработки. У меня настроен React-Router для маршрутизации через интерфейс.

Я реализоваллокальная аутентификация, которая работает хорошо. Однако, когда я пытаюсь перенаправить после успешного входа в систему, я получаю ошибку 404 not found для http://localhost3000/student/dashboard., поэтому React-Router не обрабатывает этот маршрут. Когда я набираю этот адрес напрямуюв адресную строку я попадаю на правильную страницу, обслуживаемую React-Router.

Вот мой почтовый маршрут (внутри authRoutes.js): 

app.post(
    '/auth/student',
    passport.authenticate('local', {
      failureRedirect: '/login'
    }),
    (req, res) => {
      res.redirect('/student/dashboard');
    }
  );

  app.get('/auth/logout', (req, res) => {
    req.logout();
    res.redirect('/');
  });

Настройка My React-Router: 

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" component={Header} />
          <Route exact path="/" component={Landing} />
          <Route path="/login" component={LoginPage} />
          <Route exact path="/student/dashboard" component={StudentDashboard} />
          <Route path="/teacher/dashboard" component={TeacherDashboard} />
        </div>
      </BrowserRouter>
    </div>
  );
};

Я настроил прокси для маршрутизации вызовов через сервер Express: 

module.exports = app => {
  app.use(proxy('/auth/*', { target: 'http://localhost:5000' }));
};

Нижняя половина моего файла index.js в каталоге сервера 

require('./routes/authRoutes')(app);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build')); // Serves up production assets

  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

// Initialise PORT
const PORT = process.env.PORT || 5000;
app.listen(PORT);

Я не уверен, что еще мне нужно включить, дайте мне знать, если больше. Вот ошибка: 

xhr.js:173 GET http://localhost:3000/student/dashboard 404 (Not Found)
dispatchXhrRequest @ xhr.js:173
xhrAdapter @ xhr.js:18
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:55
wrap @ bind.js:11
handleSubmit @ LoginForm.js:21
C._this.handleSubmit @ formik.esm.js:837
Formik._this.executeSubmit @ formik.esm.js:390
(anonymous) @ formik.esm.js:380
Promise.then (async)
Formik._this.submitForm @ formik.esm.js:376
Formik._this.handleSubmit @ formik.esm.js:364
callCallback @ react-dom.development.js:146
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:245
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:260
executeDispatch @ react-dom.development.js:617
executeDispatchesInOrder @ react-dom.development.js:642
executeDispatchesAndRelease @ react-dom.development.js:742
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:755
forEachAccumulated @ react-dom.development.js:722
runEventsInBatch @ react-dom.development.js:898
runExtractedEventsInBatch @ react-dom.development.js:908
handleTopLevel @ react-dom.development.js:5076
batchedUpdates$1 @ react-dom.development.js:18376
batchedUpdates @ react-dom.development.js:2301
dispatchEvent @ react-dom.development.js:5156
interactiveUpdates$1 @ react-dom.development.js:18438
interactiveUpdates @ react-dom.development.js:2322
dispatchInteractiveEvent @ react-dom.development.js:5132
createError.js:17 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:78)

Заранее спасибо за любую помощь

...