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”。
您需要了解浏览器渲染路径和 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
归档时间: |
|
查看次数: |
1840 次 |
最近记录: |