javascript - 如果 match.params 与数据库中的 ID 不匹配则重定向 | react 路由器 V4

标签 javascript reactjs react-router

如果我的数据库中没有与锁 ID 匹配的 lockId,我将尝试重定向到我的主路线。我正在从我的 Redux 状态获取

这个:

const lockId = this.props.match.params.lockId
const locks = this.props.locks || []
const lock = locks.find(lock => lock._id === lockId)
if(!lock) {
  this.props.history.push('/')
}

工作正常,因为我可以看到我的 url 正在更改,但 React 仍然对我尖叫说它找不到 address:

return (
  <div>
    <MainNavbar />
    <Grid>
      <Row className="show-grid">
        <Col md={12}>
          <h1 className="text-center">{lock.address.street}</h1>

我理解为什么因为没有锁具有该 ID,但这就是为什么我想将用户重定向到主屏幕。我是否应该使用其他类型的 React 生命周期方法,例如 componentWillReceiveProps?我很困嘿嘿

编辑:

Georgy 在评论中的回答之后。 你的意思是这样的吗?

componentDidMount() {
  if (!this.props.lock) {
    console.log("redirecting..")
    this.props.history.push('/')
  }
}

...

const lockId = this.props.match.params.itemId
const locks = this.props.locks || []
const lock = locks.find(lock => lock._id === lockId)
if(!lock) {
  return null
}

最佳答案

我认为你应该使用componentDidMount,它发生在渲染之前。在 render 方法中,如果锁不存在,你应该返回 null。

关于javascript - 如果 match.params 与数据库中的 ID 不匹配则重定向 | react 路由器 V4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46654953/

相关文章:

javascript - JQuery.each() : performance of anonymous function?

Javascript 返回函数发生得太晚了

javascript - react-native 自动完成文本输入

javascript - React-bootstrap ToggleButtonGroup 调用时使用旧值

reactjs - 如何使用 Jest 使用新的 React Router Hooks 模拟历史记录。

javascript - 使用 addEventListener 输入文本颜色更改不正确

javascript - npm WARN enoent ENOENT : no such file or directory, 打开 'C:\Users\Nuwanst\package.json'

reactjs - 在我的应用程序中 react 渲染不必要的组件

javascript - 如何在两个 react 组件之间建立共享状态?

javascript - 多列表显示隐藏