时间戳

首页 > 解决方案 > 如何使用 React Router 覆盖 Express API 路由

javascript - 如何使用 React Router 覆盖 Express API 路由

问题描述

我有一个使用 React Routes 的应用程序，它的构建由 Express 服务器提供，我也有用于 API 调用的路由。

服务器.js

const express = require('express')
const path = require('path');

const app = express()

// Serving Static Files and React
app.use(express.static(path.join(__dirname, 'client/build')));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

app.use('/api/files', require('./routes/files'))
app.use('/api/apartments', require('./routes/apartments'))
app.use('/api/keys', require('./routes/keys'))
app.use('/api/guests', require('./routes/guests'))
app.use('/api/transfers', require('./routes/transfers'))
app.use('/api/logs', require('./routes/logs'))
app.use('/api/auth', require('./routes/auth'))


const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server started on port ${PORT}`))

它工作正常，直到我转到http://localhost:5000/api/apartments - 它使应用程序崩溃并从 API 返回空白 JSON（但我猜这是合乎逻辑的）

我在路由器中设置了处理 404。如果你去http://localhost:5000/api/它将导致 React App 中的 404。

应用程序.js

<Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/login' component={Login} />
              <Route exact path='/auth' component={Auth} />
              <Route exact path='/guest' component={Guest} />
              <PrivateRoute exact path='/guests/list' component={GuestList} />
              <PrivateRoute exact path='/apartments/' component={Apartments} />
              <PrivateRoute exact path='/apartments/:name' component={Apartment} />
              <PrivateRoute exact path='/keys' component={Keys} />
              <PrivateRoute exact path='/logs' component={Logs} />
              <PrivateRoute exact path='/manager' component={Manager} />
              <PrivateRoute exact path='/upload' component={UploadForm} />

              <Route component={ErrorPage} />
            </Switch>

是否可以使 /api/apartments 将 404 处理为 React 应用程序，或者通过单独的服务器提供静态构建是更正确的方法？

标签： javascriptreactjsexpress

解决方案

创建错误路由并从服务器重定向。

<Switch>
    <Route exact path='/' component={Home} />

    <PrivateRoute exact path='/manager' component={Manager} />
    <PrivateRoute exact path='/upload' component={UploadForm} />

    <Route exact path='/404' component={ErrorPage} />
</Switch>

// 应用程序.js

//The 404 Route (ALWAYS Keep this as the last route)
app.get('*', function(req, res){
  res.redirect('/404');
});

推荐阅读