Question

你好

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

我还有一个反应应用程序（在访问/时由express提供服务）作为客户端，也有一个路由器，当我刷新react route时出现问题，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快递页面。

任何帮助都很可爱＆lt; 3

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页面。

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

1 个答案: