Javascript 如何使用React路由器覆盖Express API路由

我有一个使用React路由的应用程序，它的构建由Express server提供，其中我还有API调用的路由

Server.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}`))

<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返回空白JSON（但我想这是合乎逻辑的）

我在路由器中设置了404。如果你去，它将导致404在反应应用程序

App.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}`))

<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应用程序，或者通过单独的服务器提供静态构建服务是更正确的方法？

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

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

---

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

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

---

这可能不是最好的解决方案，但对您来说可能没问题

您可以创建一个中间件，然后检查它是否是ajax/xhr请求，这意味着您可以根据url安全地返回api响应，如果不是，并且用户点击了一些url，如

/api/reports

，因为它不是ajax请求，您可以返回

index.html

文件，然后react路由器将根据您的逻辑处理路由。您可以在末尾的routes中添加重定向到

/

函数（req、res、next）{
if（req.xhr | | req.headers.accept.indexOf（'json'）>-1）{
//如果是ajax/xhr请求，您甚至可以修改您的自定义逻辑，也许可以查找一些头
next（）；
}否则{
//返回反应应用程序
res.sendFile（path.join（_dirname，'client/build'，'index.html'）；
}
}
app.use（reactAppMiddleware）

这可能不是最好的解决方案，但可能适合您

您可以创建一个中间件，然后检查它是否是ajax/xhr请求，这意味着您可以根据url安全地返回api响应，如果不是，并且用户点击了一些url，如

/api/reports

，因为它不是ajax请求，您可以返回

index.html

文件，然后react路由器将根据您的逻辑处理路由。您可以在末尾的routes中添加重定向到

/

函数（req、res、next）{
if（req.xhr | | req.headers.accept.indexOf（'json'）>-1）{
//如果是ajax/xhr请求，您甚至可以修改您的自定义逻辑，也许可以查找一些头
next（）；
}否则{
//返回反应应用程序
res.sendFile（path.join（_dirname，'client/build'，'index.html'）；
}
}
使用（reactAppMiddleware）

我会尝试这样的方法。将错误处理程序添加到Express应用程序。在错误处理程序内部，重定向到您的React错误处理程序url。将错误处理程序添加到Express应用程序。在该错误处理程序内部，重定向到您的React错误处理程序url。感谢您的帮助，不幸的是，它解决了问题，但使应用程序的其他部分（React常规路由）崩溃。上述解决方案有效。再次感谢。感谢您的帮助，不幸的是，它解决了问题，但使应用程序的其他部分崩溃（react regular routes）。上述解决方案有效。再次感谢。谢谢，这个解决方案很好，现在，我没有遇到任何问题。请允许我询问您的意见，从性能/安全性/等角度来看，是否最好离开此类解决方案或拆分前端/后端服务器。再次感谢！我建议您将应用程序部署在一些静态文件托管站点上，如Aws S3，您可以使用Aws Cloudfront（CDN）来减少延迟。您可以使用firebase、netlify和更多。您甚至可以使用nginx 9https://nginx.org/en/ 但这将花费更多。使用文件存储是部署单页应用程序最便宜也是最好的方法谢谢，该解决方案工作得很好，目前为止，我没有遇到任何问题。请允许我询问您的意见，从性能/安全性/等角度来看，是否最好离开此类解决方案或拆分前端/后端服务器。再次感谢！我建议您将应用程序部署在一些静态文件托管站点上，如Aws S3，您可以使用Aws Cloudfront（CDN）来减少延迟。您可以使用firebase、netlify和更多。您甚至可以使用nginx 9https://nginx.org/en/ 但这将花费更多。使用文件存储是部署单页应用程序最便宜也是最好的方法