React Redux 单页应用程序:使用整页渲染处理 API 404
React Redux one-page app: handle an API 404 with full page render
在使用 react-router 实现导航的 React 单页应用程序中,当在页面中呈现组件时遇到请求的 API 错误时呈现整页错误的最佳做法是什么?
更具体地说,我知道 react-router 有一个很好的方法来为 URL 根本没有映射的路由实现 404 错误处理程序,但是当路由确实匹配具有动态的映射路由时URL 的一部分(如数据 ID)导致组件呈现,该组件发出响应 404 错误的请求,用错误视图替换整个反应呈现视图的最佳做法是什么?
示例场景:
- 路线=“/profile/person/:PersonId”,
- 后端不存在人员 ID 1234。
- 用户访问“/profile/person/1234”
- profile/person/:PersonId 路由的组件呈现,并发出请求以获取人员 ID 1234 的配置文件数据,returns 带有 404,这实际上意味着给定 URL 是一个 404,虽然不是反应路由器。
这只是一个建议,因为我真的不相信有您所要求的明确的最佳实践。
ApiService.fetch(url).then(
onSuccess(result) => { /* dispatch page fetch success */ },
onError(result) => { /* dispatch page fetch error */ }
);
然后构建您的应用程序:
<App>
{ error ? <ErrorHandler /> : <PageHandler /> }
</App>
此结构会缩短您在遇到服务器错误时在有效路由上呈现的页面并改为呈现错误内容。
在使用 react-router 实现导航的 React 单页应用程序中,当在页面中呈现组件时遇到请求的 API 错误时呈现整页错误的最佳做法是什么?
更具体地说,我知道 react-router 有一个很好的方法来为 URL 根本没有映射的路由实现 404 错误处理程序,但是当路由确实匹配具有动态的映射路由时URL 的一部分(如数据 ID)导致组件呈现,该组件发出响应 404 错误的请求,用错误视图替换整个反应呈现视图的最佳做法是什么?
示例场景:
- 路线=“/profile/person/:PersonId”,
- 后端不存在人员 ID 1234。
- 用户访问“/profile/person/1234”
- profile/person/:PersonId 路由的组件呈现,并发出请求以获取人员 ID 1234 的配置文件数据,returns 带有 404,这实际上意味着给定 URL 是一个 404,虽然不是反应路由器。
这只是一个建议,因为我真的不相信有您所要求的明确的最佳实践。
ApiService.fetch(url).then(
onSuccess(result) => { /* dispatch page fetch success */ },
onError(result) => { /* dispatch page fetch error */ }
);
然后构建您的应用程序:
<App>
{ error ? <ErrorHandler /> : <PageHandler /> }
</App>
此结构会缩短您在遇到服务器错误时在有效路由上呈现的页面并改为呈现错误内容。