Почему маршруты React не работают на сервере должным образом? - PullRequest
Новая
       6

Почему маршруты React не работают на сервере должным образом?

0 голосов
/ 22 сентября 2018

Я создаю реагирующее приложение, и у меня возникли некоторые проблемы.Мои маршруты хорошо работают на стороне клиента (dev-server), но когда я обслуживаю статические файлы через экспресс, он работает только на маршруте '/' . '/ dashboard' не работает. Но когда я добавляю эту строку

app.get ('*', (req, res) => res.sendFile (path).join (__dirname, '../../dist/index.html')));

маршрутизация начинает работать хорошо, но я получаю еще одну ошибку при попытке SIGN IN

Uncaught SyntaxError: неожиданный токен <</p>

Это мой код экспресс-сервера `

const express = require('express');
const session = require('express-session');
const passport = require('passport');
const EventbriteStrategy = require('passport-eventbrite-oauth').OAuth2Strategy;
const path = require('path');
const bodyParser = require('body-parser');
const keys = require('./config/keys');

const port = process.env.PORT || 5000;

const app = express();

app.use(express.static(path.join(__dirname, '../../dist')));
app.get('*', (req, res) => res.sendFile(path.join(__dirname, '../../dist/index.html')));


app.use(passport.initialize());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(session({
  secret: 'login',
  resave: false,
  saveUninitialized: true
}));

const strategy = new EventbriteStrategy({
  clientID: keys.eventbriteClientID,
  clientSecret: keys.eventbriteClientSecret,
  callbackURL: 'http://localhost:5000/auth/eventbrite/callback'
},
((accessToken, refreshToken, extraParams, profile) => {
  console.log(profile, 'profile');
  console.log(accessToken, 'accessToken');
  console.log(accessToken, 'accessToken');
  console.log(extraParams, 'extraParams');
}
));

passport.use(strategy);

app.get('/auth/eventbrite',
  passport.authenticate('eventbrite', {}), (req, res) => {
    console.log(res, 'rees');
  });

app.get('/auth/eventbrite/callback',
  passport.authenticate('eventbrite', { failureRedirect: '/' }),
  (req, res) => {
    if (!req.user) {
      throw new Error('user null');
    }
    res.redirect('/dashboard');
  });

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

И это мои роутеры` 

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DashboardPage from '../components/pages/DashboardPage';
import LoginPage from '../components/pages/LoginPage';
import NotFoundPage from '../components/pages/NotFoundPage';

const AppRouter = () => (
  <BrowserRouter>
    <React.Fragment>
      <Switch>
        <Route path="/" component={LoginPage} exact />
        <Route path="/dashboard" component={DashboardPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </React.Fragment>
  </BrowserRouter>
);

export default AppRouter;

А вот страница входа в систему `

import React from 'react';
import { NavLink } from 'react-router-dom';

const logo = require('../../../../public/images/react.png');

const config = {
  logo,
  authUrl: ''
};

const LoginPage = props => (
  <React.Fragment>
    <header file={props} className="login-header">
      <div className="row">
        <div className="login-header__wrapper">
          <div className="login-header__logo-box">
            <NavLink to="/" role="link"><img src={config.logo} alt="logo" width="190" height="80" className="navbar__logo" /></NavLink>
          </div>
          <h1 className="login-header__heading">Welcome to Events</h1>
        </div>
      </div>
    </header>
    <main>
      <section className="register">
        <div className="row">
          <div className="register-wrapper">
            <section className="register__description">
              <h2>Events</h2>
              <p>Here you can search your favourite events and get the location on map</p>
            </section>
            <section className="register__sign-in">
              <h2>Sign in with facebook</h2>
              <div>
                <a href="/auth/eventbrite" className="btn btn_sign-in">Sign in</a>
              </div>
            </section>
          </div>
        </div>
      </section>

    </main>

Что я должен сделать, чтобы все маршруты работали правильно?

1 Ответ

0 голосов
/ 22 сентября 2018

Маршрут подстановочного знака, *, необходим для реакции с React Router, чтобы сервер не искал get с маршрутом, который соответствует /dashboard, когда React Router меняет местоположение и вместо этого React Routerможно продолжать обрабатывать маршруты.Таким образом, вы находитесь на правильном пути.

Однако проблема в том, что сначала проверяется ваш групповой маршрут, поэтому он перехватывает каждый отдельный маршрут, включая ваши /auth маршруты.Чтобы это исправить, вы можете просто поставить контроллер для подстановочного маршрута после все другие маршруты были определены на сервере.Это работает, потому что Express проверит маршруты, перемещающиеся сверху вниз файла app.js (или как вы его назвали), и остановится, как только найдет тот, который соответствует запрошенному маршруту.

Так что простопереместите это: 

app.get('*', (req, res) => res.sendFile(path.join(__dirname, '../../dist/index.html')));

так, чтобы оно было ниже любого другого app.get или app.post, и т. д. В основном это должно идти прямо выше: 

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});
...