reactjs - React-router:找不到(404)动态内容？

Question

react-router 如何正确处理通用应用中动态内容的 404 页面？

假设我想显示一个具有 '/user/:userId' 之类的路由的用户页面。我会有这样的配置:

<Route path="/">
    <Route path="user/:userId" component={UserPage} />
    <Route path="*" component={NotFound}  status={404} />
</Route>

如果我请求 /user/valid-user-id，我会获得用户页面。

如果我请求 /foo，我会得到正确的 404。

但是如果我请求 /user/invalid-user-id 该怎么办？当获取用户的数据时，我会意识到该用户不存在。因此，正确的接缝做法是:

• 显示 404 页面
• 返回 404 http 代码(用于服务器端渲染)
• 保持网址不变(我不需要重定向)

我该怎么做？这看起来像是一种非常标准的行为。我很惊讶没有找到任何例子......

编辑:
看来我并不是唯一一个为此苦苦挣扎的人。像这样的东西会有很大帮助:https://github.com/ReactTraining/react-router/pull/3098
由于我的应用程序不会很快上线，我决定等待看看下一个 react 路由器版本必须提供什么...

Answer 1

首先为 onEnter 回调创建一个中间件函数，以便这对于 redux Promise 是可行的:

import { Router, Route, browserHistory, createRoutes } from "react-router";

function mixStoreToRoutes(routes) {
    return routes && routes.map(route => ({
        ...route,
        childRoutes: mixStoreToRoutes(route.childRoutes),
        onEnter: route.onEnter && function (props, replaceState, cb) {
            route.onEnter(store.dispatch, props, replaceState)
                .then(() => {
                    cb(null)
                })
                .catch(cb)
        }
    }));
}

const rawRoutes = <Route path="/">
    <Route path="user/:userId" component={UserPage} onEnter={userResolve.fetchUser} />
    <Route path="*" component={NotFound}  status={404} />
</Route>

现在，在这个 onEnter 函数中，您可以直接使用 redux 存储。因此，您可以调度一个成功或失败的操作。示例:

function fetch(options) {
    return (dispatch) => {
        return new Promise((resolve, reject) => {
            axios.get('<backend-url>')
                .then(res => {
                    resolve(dispatch({type: `CLIENT_GET_SUCCESS`, payload: res.data}))
                })
                .catch(error => {
                    reject(dispatch({type: `CLIENT_GET_FAILED`, payload: error}));
                })
            }
        })
    }
}

let userResolve = {

    fetchUser: (dispatch, props, replace) => {
        return new Promise((next, reject) => {
            dispatch(fetch({
                user: props.params.user
            }))
                .then((data) => {
                    next()
                })
                .catch((error) => {
                    next()
                })
        })
    }

}

每当解析 promise 失败时，react-router 都会自动查找可以为此端点呈现的下一个组件，在本例中是 404 组件。

这样您就不必使用 replaceWith 并且您的网址将保留。