部署在 heroku 上的 React + Node + Express 应用程序显示一个空白页面，显示不匹配的 404 路由答案

【问题标题】：React + Node + Express app deployed on heroku shows a blank page for no match 404 routes部署在 heroku 上的 React + Node + Express 应用程序显示一个空白页面，显示不匹配的 404 路由
【发布时间】：2020-12-09 17:25:47
【问题描述】：

我已经构建了一个 MERN 堆栈应用程序。在本地一切正常，但在 heroku 上部署的应用程序没有显示我的自定义 404 页面，因为没有匹配的路线。我很难弄清楚这个问题。
这是我在 heroku 上的应用程序的链接：my-app-on-heroku
如果需要任何进一步的信息，请让我知道包括它
任何帮助，将不胜感激。

app.js

app.use('/api/v1/books', bookRouter);
app.use('/api/v1/users', userRouter);

// Catch all unknown routes ( this middleware runs after all routes have been defined !)
if (process.env.NODE_ENV === 'production') {
  // Serve static files
  app.use(express.static(path.resolve(__dirname, '../client', 'build')));

  app.get('*', (req, res, next) => {
    // Serve index.html file if it doesn't recognize the route
    res.sendFile(path.resolve(__dirname, '../client', 'public', 'index.html'));
  });
}

// Final middleware, Global Error Handler
app.use(globalErrorHandler);

module.exports = app;

Routes.js

import React from 'react';
import { connect } from 'react-redux';
import { Router, Route, Switch, Redirect } from 'react-router-dom';

import history from '../history';
import Layout from './HOC/Layout.jsx';
import Home from './pages/Home';
import Login from './pages/Login';
import SignUp from './pages/SignUp';
import UserPanel from './pages/UserPanel/Account';
import PasswordReset from './pages/PasswordReset';
import NotFound from './pages/NotFound';

class Routes extends React.Component {
  render() {
    const { currentUser } = this.props;

    return (
      <Router history={history}>
        <Layout>
          <Switch>
            <Route path="/" exact>
              <Home />
            </Route>
            <Route path="/login" exact>
              {currentUser ? <Redirect to="/" /> : <Login />}
            </Route>
            <Route path="/signup" exact>
              {currentUser ? <Redirect to="/" /> : <SignUp />}
            </Route>
            <Route path="/password-reset" exact>
              {currentUser ? <Redirect to="/" /> : <PasswordReset />}
            </Route>
            <Route path="/password-reset/:token" exact>
              {currentUser ? <Redirect to="/" /> : <PasswordReset />}
            </Route>
            <Route path="/me/settings" exact>
              {currentUser ? <UserPanel /> : <Redirect to="/login" />}
            </Route>
            <Redirect from="/me" to="/me/settings" />
            <Route path="/404" exact>
              <NotFound />
            </Route>
            <Redirect to="/404" />
          </Switch>
        </Layout>
      </Router>
    );
  }
}

const mapStateToProps = ({ user: { currentUser } }) => ({ currentUser });

export default connect(mapStateToProps)(Routes);

【问题讨论】：

而不是Redirect，只需尝试添加类似<Route component={NotFound} />的东西......你可以用这个替换最后一个Route和Redirect.....阅读here
@RohitAmbre 感谢您的评论。不幸的是它并没有解决问题！

标签： node.js reactjs express heroku react-router

【解决方案1】：

问题在于在 app.js 中提供 index.html 文件。它必须从build 文件夹而不是public 提供。

app.js（修改）

app.use('/api/v1/books', bookRouter);
app.use('/api/v1/users', userRouter);

// Catch all unknown routes ( this middleware runs after all routes have been defined !)
if (process.env.NODE_ENV === 'production') {
  // Serve static files
  app.use(express.static(path.resolve(__dirname, '../client', 'build')));

  app.get('*', (req, res, next) => {
    // Serve index.html file if it doesn't recognize the route
    res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html')); // <- Here !
  });
}

// Final middleware, Global Error Handler
app.use(globalErrorHandler);

module.exports = app;

【讨论】：