为啥 React 路由不能在服务器上正常工作？

Posted 2023-02-21

【中文标题】为啥 React 路由不能在服务器上正常工作？

【英文标题】：Why does React routes doesn't work on server properly?为什么 React 路由不能在服务器上正常工作？

【发布时间】：2019-02-26 09:12:47

【问题描述】：

我正在创建一个反应应用程序并且有一些问题。我的路由在客户端（开发服务器）运行良好，但是当我通过 express 提供静态文件时，它只适用于 '/' 路由。 '/dashboard' 不起作用。但是当我添加这一行时

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

路由开始运行良好，但我在尝试 SIGN IN 时遇到另一个错误

Uncaught SyntaxError: Unexpected token

这是我的快递服务器代码`

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    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】：

通配符路由 * 是与 React Router 反应所必需的，因此当 React Router 更改位置时，服务器不会去寻找具有与 /dashboard 匹配的路由的 get，而是 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`);
);

【讨论】：

MAGIC!!! ...如此简单的答案，如此正确。非常感谢，你救了我不眠之夜）