Express 404 页面与反应路由器重叠

Question

你好

我有一个 express 应用程序作为 REST 服务器运行，这意味着所有 /api/xx 路由都在 express 中处理。

我还有一个 react 应用程序（在访问 / 时由 express 提供服务）作为客户端，它也有一个路由器，当我刷新 react route 时出现问题，反而出现了 express 的 404 页面错误反应页面本身。

反应路由器

<Router history={browserHistory}>
  <Route path="/" component={MainLayout} user={user}>
    <IndexRoute component={DocumentsPage}></IndexRoute>
      <Route path="about" component={AboutPage}></Route>
      <Route path=":id/preview" component={PreviewPage}/>
      <Route path="upload" component={UploadPage}></Route>
  </Route>
</Router>

当我使用<Link to="upload" </Link> 访问时，页面出现，当我刷新页面时，我得到了 404 express 的页面..

任何帮助都会很可爱

Answer 1

您需要配置回退，以便您的 Express 路由中不存在的每个请求都被重定向到您的 React 应用程序/。下面是一个基本示例，说明如何使用 Express 做到这一点：

import fallback from 'express-history-api-fallback';
import express from 'express';
import http from 'http';

// Set up express
const app = express();
const server = http.createServer(app);
const root = `${__dirname}`;

// History Fallback for express
app.use(express.static(root));
app.use(fallback('index.html', { root }));

// Listen
server.listen(8080, '0.0.0.0');

那么你也可以使用 React Router 处理你的 404 页面。