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

Question

所以我有一个在 expressjs 中运行的后端，并且我有多个路由。现在我只是按照this 教程在 express 上设置了一个 RESTful api。现在我想在前端切换到完全反应，这样我就可以在后端运行一个 api 从数据库中获取内容，并考虑使用来自 react 的fetch 来获取该数据。我看到很多人说这是最好的方法。但是现在有一个问题，我不知道如何路由。我有react-router 设置，所以我假设我会使用它。但是我怎样才能将这些文件提供给客户端呢？我怎样才能确保每条路由 except /api 路由只为我的 js 文件提供服务？就像我已经有一个带有index.html 和main<hash>.js 的内置文件夹一样。我很容易运行它们，但我怎样才能将它们与 express 集成？我无法找到任何答案。 如何为使用 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”的任何调用都将由第一个路由处理，而所有其他请求将由第二个路由处理。

现在我想在前端切换到完全反应，这样我就可以 有一个在后端运行的 api 从数据库中获取内容和 我正在考虑使用 fetch from react 来获取该数据

这里不需要这个，完全是客户端渲染

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

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

在那里您可以定义所有路由并简单地调用 url http://localhost/api/xxxx 并获取数据，您可以在前端使用这些数据。在这种情况下，将有一个 Nodejs 服务器将服务于前端和 expressjs服务器将托管“api”服务以从中获取数据。

我有 react-router 设置，所以我假设我会使用它。但是如何 我可以将这些文件提供给客户端吗？`

如何为使用 expressjs 提供服务的 reactjs 应用程序路由？

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