reactjs – react-router:动态内容未找到(404)?

前端之家收集整理的这篇文章主要介绍了reactjs – react-router:动态内容未找到(404)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在路由器中正确处理动态内容404页面

假设我想显示一个像’/ user /:userId’这样的路由的用户页面.我会有这样的配置:

  1. <Route path="/">
  2. <Route path="user/:userId" component={UserPage} />
  3. <Route path="*" component={NotFound} status={404} />
  4. </Route>

如果我请求/ user / valid-user-id,我会得到用户页面.

如果我要求/ foo,我得到一个合适的404.

但是如果我请求/ user / invalid-user-id怎么办?在为用户获取数据时,我将意识到该用户不存在.所以,做接缝的正确方法是:

>显示404页面
>返回404 http代码(用于服务器端
渲染)
>保持URL原样(我不想重定向)

我怎么做??它接缝像一个非常标准的行为.我很惊讶没有找到任何例子……

编辑:
像我这样的接缝不是唯一一个与之斗争的人.像这样的东西会有很多帮助:https://github.com/ReactTraining/react-router/pull/3098
由于我的应用程序不会很快上线,我决定等待下一个反应路由器版本提供什么…

首先为onEnter回调创建一个中间件函数,这样对于redux promises来说这是可行的:
  1. import { Router,Route,browserHistory,createRoutes } from "react-router";
  2.  
  3. function mixStoreToRoutes(routes) {
  4. return routes && routes.map(route => ({
  5. ...route,childRoutes: mixStoreToRoutes(route.childRoutes),onEnter: route.onEnter && function (props,replaceState,cb) {
  6. route.onEnter(store.dispatch,props,replaceState)
  7. .then(() => {
  8. cb(null)
  9. })
  10. .catch(cb)
  11. }
  12. }));
  13. }
  14.  
  15. const rawRoutes = <Route path="/">
  16. <Route path="user/:userId" component={UserPage} onEnter={userResolve.fetchUser} />
  17. <Route path="*" component={NotFound} status={404} />
  18. </Route>

现在,在这个onEnter函数中,您可以直接使用redux存储.因此,您可以发送成功或失败的操作.例:

  1. function fetch(options) {
  2. return (dispatch) => {
  3. return new Promise((resolve,reject) => {
  4. axios.get('<backend-url>')
  5. .then(res => {
  6. resolve(dispatch({type: `CLIENT_GET_SUCCESS`,payload: res.data}))
  7. })
  8. .catch(error => {
  9. reject(dispatch({type: `CLIENT_GET_Failed`,payload: error}));
  10. })
  11. }
  12. })
  13. }
  14. }
  15.  
  16. let userResolve = {
  17.  
  18. fetchUser: (dispatch,replace) => {
  19. return new Promise((next,reject) => {
  20. dispatch(fetch({
  21. user: props.params.user
  22. }))
  23. .then((data) => {
  24. next()
  25. })
  26. .catch((error) => {
  27. next()
  28. })
  29. })
  30. }
  31.  
  32. }

每当解析承诺失败时,react-router将自动寻找它可以为此端点呈现的下一个组件,在这种情况下是404组件.

因此,您不必使用replaceWith,并保留您的URL.

猜你在找的React相关文章