使用 Express 提供 react-routes

Question

我正在使用 react-router-dom 并像这样在 rotes 上加载组件：

    <Switch>
        <Route exact path="/home" component={Home} />
        <Route path="/services" component={Services} />
        ...and so on...
        <Route component={PageNotFound} />
    </Switch>

我使用 webpack 构建这个项目，并且只有 1 个单个文件 bundle.js。并将它用作我的 server.js 中的静态文件

import express from 'express'
const app = express()
app.use('/', express.static('./public'))
app.listen(3000)

在我开始尝试在某些路线上做某事之前，一切都很好：

app.get('/services', () => {
  console.log('services')
})

当我在路线“/服务”上时，它不会在控制台中记录“服务”。

Answer 1

您需要了解浏览器渲染路径和 Express 渲染路径之间的区别。它们是两种完全不同的东西。当您刷新浏览器时，Express 不知道如何处理“/services”，因此您会收到错误消息。当您键入“/api/services”时，express 确实知道如何处理路径。当 React/React-Router 完全加载到浏览器中时，它不会向 Express 服务器请求“/services”，浏览器已经知道路由器，并呈现 HTML。

您需要一个通配符路由匹配“*”来呈现默认/index.html 文件。这将允许您的浏览器找到“/services”页面。这很复杂，但基本上，您的浏览器调用“/services”，这会命中 express，谁试图找到路径匹配。如果您有一个指向您的 index.html 页面的通配符，则会将其返回给浏览器。浏览器然后查看路由“/services”并将其传递给 React Router，后者然后加载服务组件。 您总是返回相同的 HTML（索引/默认），它是浏览器显示正确页面的魔力。这就是为什么拥有不同的路径/路由很重要（路径：“/api/services”，路由：“/services”。

如果您不这样做，那么用户在“/services”路径上刷新页面时会点击 express 并获取“/services”路径。

路径：与代码块“/api/services”的 URL 的 Express 模式匹配

route：用于渲染给定组件的 ReactRouter URL

Answer 2

确保您的后端路由不同，否则会令人困惑。

app.get('/api/services', () => {
  console.log('services')
})

这样我们就知道了：

/services = 你的 React-router 组件

/api/services = 对后端的 API 调用