使用 Express 提供反应路线

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

确保您的后端路由不同，否则会造成混淆。

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

这样我们就知道：

/services = 你的 React-router 组件

/api/services = API 调用后端

Answer 2

您需要了解浏览器渲染路线和 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 (index/default)，是浏览器发挥了显示正确页面的魔力。这就是为什么拥有不同的 paths/routes 很重要（路径：“/api/services”，路线：“/services”。

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

路径：URL 与代码块“/api/services”

的快速模式匹配

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

使用 Express 提供反应路线

Serving react-routes with Express

javascript

express

reactjs

react-router

react-router-dom