如何在路由器中正确处理动态内容的404页面？
假设我想显示一个像’/ user /：userId’这样的路由的用户页面.我会有这样的配置：
@H_301_3@<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代码(用于服务器端
渲染)
>保持URL原样(我不想重定向)
我怎么做？？它接缝像一个非常标准的行为.我很惊讶没有找到任何例子……
编辑：
像我这样的接缝不是唯一一个与之斗争的人.像这样的东西会有很多帮助：https://github.com/ReactTraining/react-router/pull/3098
由于我的应用程序不会很快上线,我决定等待下一个反应路由器版本提供什么…
首先为onEnter回调创建一个中间件函数,这样对于redux promises来说这是可行的：
@H_301_3@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存储.因此,您可以发送成功或失败的操作.例：
@H_301_3@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,replace) => { return new Promise((next,reject) => { dispatch(fetch({ user: props.params.user })) .then((data) => { next() }) .catch((error) => { next() }) }) } }每当解析承诺失败时,react-router将自动寻找它可以为此端点呈现的下一个组件,在这种情况下是404组件.
因此,您不必使用replaceWith,并保留您的URL.
