[英]How to handle invalid ID in react-router route in a redux app?
I have the route /messages/:id
that renders a message. 我有路由/messages/:id
呈现一条消息。 However if id
is pointing to a non-existing message, where and how should that be handled? 但是,如果id
指向不存在的消息,则应在何处以及如何处理? My component is bound to the message using redux: 我的组件使用redux绑定到消息:
function mapStateToProps(state, ownProps) {
return {
message: state.messages[ownProps.params.id]
}
}
Then message
will be undefined
in case no such message exist and the component must handle that, and render something different. 如果不存在这样的消息,并且组件必须处理该消息并呈现不同的内容,则该message
将是undefined
。 However, this seems to bloat the component and I think maybe this should be handled in the router? 但是,这似乎会使组件膨胀,我认为这应该在路由器中处理吗? If there is no such message, it should not allow the route to be called. 如果没有这样的消息,则不应允许调用路由。
Any thoughts? 有什么想法吗?
I too am interested in this too and I have a solution, though not the most elegant one. 我也对此感兴趣,尽管没有最优雅的解决方案,但我有一个解决方案。 Hopefully this will help though. 希望这会有所帮助。
import NotFound from './NotFound'
import Message from './Message'
import {asyncGetMessage} from './api'
const onEnter = ({params, location}, replaceState, callback) => {
asyncGetMessage(params.messageId)
.then((isFound) => {
location.isFound = isFound
callback()
})
}
const getComponent = (Component) => {
return (location, callback) => {
callback(null, (state) => {
if (location.isFound) {
state.route.status = 200
return <Component {...state} />
} else {
state.route.status = 404
return <NotFound {...state} />
}
})
}
}
const routes = (
<Route path='messages'>
<Route path=':messageId' getComponent={getComponent(Message)} onEnter={onEnter} />
</Route>
)
What is happening here is the onEnter
method is called initially and waits for the callback. 这里发生的是最初调用onEnter
方法并等待回调。 The onEnter
calls the asyncGetMessage
promise and sets the isFound
property on the location
to true
or false
. onEnter
调用asyncGetMessage
promise并将location
的isFound
属性设置为true
或false
。
Then getComponent
is called, I used a factory to provide the Message
component as Component
. 然后调用getComponent
,我使用了一个工厂来提供Message
组件作为Component
。 It needs to return a callback, and within the callback, error
and a function with state
as the first argument. 它需要返回一个回调,并且在回调中包含error
和一个以state
作为第一个参数的函数。 From there it checks the isFound
property on location
and returns either the Component
setup in the factory or the NotFound
component. 从那里检查location
的isFound
属性,并返回工厂中的Component
设置或NotFound
组件。
I am also setting the the route status
to 404 so the server can provide the correct http code when it is rendering the first page load. 我还将路由status
设置为404,以便服务器在呈现第一页加载时可以提供正确的http代码。
Unfortunately the signature of getComponent
doesn't receive state, otherwise it would be possible to do it all there instead of using onEnter
too. 不幸的是, getComponent
的签名不接收状态,否则可以在此完成所有操作,而不用使用onEnter
。
Hope this helps. 希望这可以帮助。
I had the same problem, but my final thoughts on this are, that it is not the concern of the router or a getComponent Wrapper, but only the concern of the Component itself to handle it's own (faulty) state. 我遇到了同样的问题,但是我对此的最终想法是,这与路由器或getComponent包装器无关,而仅与组件自身处理其自身的(故障)状态有关。
When your Component is able to be mounted in an erroneous state, like message = undefined, then your Component should react according to the erroneous state. 当您的组件能够以错误状态挂载时,例如message = undefined,则您的组件应根据错误状态做出反应。
Preventing your Component from the erroneous state would be an alternative too, but this bloats your code anyways and the Component would still not be able to handle it's error state. 也可以选择防止Component处于错误状态,但这仍然会使您的代码this肿,并且Component仍然无法处理其错误状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.