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构建这个项目，只有一个文件bundle.js。并将其用作我的server.js中的静态文件

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

Eveything工作正常，直到我开始尝试在我的某些路线上做某事：

app.get('/services', () => {
  console.log('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。

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

如果你没有，那么刷新“/ services”路由页面的用户就会点击快递并获得“/ services”路径。

路径：表示代码块“/ api / services”

的URL的Express模式匹配

route：用于呈现给定Component

的ReactRouter URL

用Express服务反应路线

2 个答案: