如何在Redux應用程序中的React-Router路由中處理無效ID？

Question

我有路由/messages/:id呈現一條消息。 但是，如果id指向不存在的消息，則應在何處以及如何處理？ 我的組件使用redux綁定到消息：

function mapStateToProps(state, ownProps) {
  return {
    message: state.messages[ownProps.params.id]
  }
}

如果不存在這樣的消息，並且組件必須處理該消息並呈現不同的內容，則該message將是undefined 。 但是，這似乎會使組件膨脹，我認為這應該在路由器中處理嗎？ 如果沒有這樣的消息，則不應允許調用路由。

有什么想法嗎？

Answer 1

我也對此感興趣，盡管沒有最優雅的解決方案，但我有一個解決方案。 希望這會有所幫助。

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>
)

這里發生的是最初調用onEnter方法並等待回調。 onEnter調用asyncGetMessage promise並將location的isFound屬性設置為true或false 。

然后調用getComponent ，我使用了一個工廠來提供Message組件作為Component 。 它需要返回一個回調，並且在回調中包含error和一個以state作為第一個參數的函數。 從那里檢查location的isFound屬性，並返回工廠中的Component設置或NotFound組件。

我還將路由status設置為404，以便服務器在呈現第一頁加載時可以提供正確的http代碼。

不幸的是， getComponent的簽名不接收狀態，否則可以在此完成所有操作，而不用使用onEnter 。

希望這可以幫助。

Answer 2

我遇到了同樣的問題，但是我對此的最終想法是，這與路由器或getComponent包裝器無關，而僅與組件自身處理其自身的（故障）狀態有關。

當您的組件能夠以錯誤狀態掛載時，例如message = undefined，則您的組件應根據錯誤狀態做出反應。

也可以選擇防止Component處於錯誤狀態，但這仍然會使您的代碼this腫，並且Component仍然無法處理其錯誤狀態。