javascript - 使用 Express 提供 react 路线

Question

我正在使用 react-router-dom 并像这样死记硬背地加载组件:

    <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')
})

当我在路由 '/services' 上时，它不会在控制台中记录 'services'。

Answer 1

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

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

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

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

route:用于呈现给定组件的 ReactRouter URL