Question

我正在创建一个React应用程序，并且遇到了一些问题。我的路由在客户端（dev-server）上运行良好，但是当我通过express服务静态文件时，它仅在'/' route上运行。 '/ dashboard'不起作用。但是当我添加此行

app.get（'*'，（req，res）=> res.sendFile（path.join（__ dirname， '../../ dist / index.html'））））

路由开始运作良好，但尝试登录

时出现另一个错误

未捕获到的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>

我应该怎么做才能使所有路线正常工作？

Answer 1

与React Router反应需要通配符路由*，以便当React Router更改时，服务器不会去寻找get与/dashboard匹配的路由位置，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}`);
});

为什么React路由无法在服务器上正常工作？

1 个答案: