使用 Express 提供反应路线

2 javascript express reactjs react-router react-router-dom

我正在使用react-router-dom并按如下方式加载组件:

    <Switch>
        <Route exact path="/home" component={Home} />
        <Route path="/services" component={Services} />
        ...and so on...
        <Route component={PageNotFound} />
    </Switch>
Run Code Online (Sandbox Code Playgroud)

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

import express from 'express'
const app = express()
app.use('/', express.static('./public'))
app.listen(3000)
Run Code Online (Sandbox Code Playgroud)

一切正常,直到我开始尝试在我的一些路线上做一些事情:

app.get('/services', () => {
  console.log('services')
})
Run Code Online (Sandbox Code Playgroud)

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

Gar*_*lor 6

您需要了解浏览器渲染路径和 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”路径。

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

路由:用于渲染给定组件的 ReactRouter URL