如何使用express来路由react-router应用程序？

Question

所以我有一个后端运行在expressjs,我有多个路由.现在我只是按照本教程在express上设置RESTful api.现在我想切换到前端的完全响应,这样我将在后端运行api以从数据库中获取内容并且我正在考虑使用fetchreact来获取数据.我看到很多人说这是最好的方法.但现在有一个问题,我不知道如何为此做好准备.我已经react-router设置好所以我假设我会使用它.但是,如何将这些文件提供给客户端？如何确保除 /api路由之外的每个路由都只提供我的js文件？就像我已经建立了一个带有index.html和的文件夹main<hash>.js.我正在轻松地运行它们但是如何将它们与快速集成？我无法找到任何答案.如何使用expressjs为reactjs应用程序路由？而且我看到一个教程告诉我使用*路线,但这意味着即使我的api路线也只指向那个.

Answer 1

渲染应用程序基本上有三种方法。一种是服务器端渲染，另一种是客户端渲染，第三种是同构渲染。

因此，如果您在 Nodejs 中定义路由并通过这些路由导航应用程序，那么它将完全是服务器端渲染。

我看到一个教程告诉我使用 * 路线，但这意味着即使我的 api 路线也只会指向该路线。？如何确保除 /api 路由之外的每个路由都只为我的 js 文件提供服务？

关于这个你能做的是

server.get('/api', (req, res, next) => {
    //You can handle the request here
})  

server.get('*', (req, res, next) => {
    //You can handle the request here
})

您可以按此顺序定义您的路由。这样，对“/api”的任何调用都将由第一个路由处理，所有其他请求将由第二个路由处理。

现在我想在前端切换到完全 React，这样我将在后端运行一个 api 以从数据库中获取数据，并且正在考虑使用 fetch from React 来获取数据

这里你不需要这个。它将完全是客户端渲染

    server.get('*', (req, res, next) => {
        //You can handle the request here
    })

为此，您可以从头开始创建一个 React 应用程序或使用一些样板文件（https://github.com/facebookincubator/create-react-app）。

在那里，您可以定义所有路由，只需调用 urlhttp://localhost/api/xxxx并获取数据，您就可以在前端使用这些数据。在这种情况下，将有一个 Nodejs 服务器为前端提供服务，而expressjs 服务器将托管“ api' 服务从中获取数据。

我有反应路由器设置，所以我假设我会使用它。但是我如何将这些文件提供给客户端呢？

如何使用expressjs路由reactjs应用程序？

Reactjs 应用程序编译后是静态文件的组合，主要包括 html、css、javascript。如果您希望您的应用程序由express.js 服务器提供服务，那么您需要使用同构渲染。它是迄今为止渲染应用程序的最佳方法，因为它有利于 SEO 和初始快速页面加载。这是以复杂的设置为代价的。在这种情况下，每当页面刷新或第一个请求到来时，express将提供第一个页面（index.html），index.html将包含客户端渲染所需的静态（捆绑）js和css文件。第一次渲染将由express服务器完成，后续渲染将由浏览器本身完成。