使用Express服务反应路线

Question

我正在像这样的死记硬背上使用react-router-dom和load组件：

    <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不知道如何处理“ /服务”，因此会出现错误。 当您键入“ / api / services”时，express确实知道如何处理路径。 当React / React-Router完全加载到浏览器中时，它不向Express服务器请求“ /服务”，浏览器已经知道路由器，并呈现HTML。

您需要一个通配符路由匹配“ *”，以呈现default / index.html文件。 这将使您的浏览器可以找到“ /服务”页面。 这很复杂，但是从根本上讲，您的浏览器将其称为“ / services”，这表示要尝试找到路径匹配项。 如果您有一个通配符指向index.html页面，那么它将返回到浏览器。 然后，浏览器查看路由“ / services”，并将其传递给React Router，然后由后者加载服务组件。 您总是返回相同的HTML（索引/默认值），这是浏览器神奇地显示正确页面的原因。 这就是为什么拥有不同的路径/路由（路径：“ / api / services”，路由：“ / services”）很重要的原因。

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

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

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

Answer 2

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

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

这样我们知道：

/ services =您的React-router组件

/ api / services =后端的API调用