react-router重定向条件

IT技术 reactjs react-router conditional
2021-05-05 06:34:32

我正在尝试制作一个按钮，该按钮仅在正确完成验证后将用户重定向到新页面。

有没有办法做这样的事情？如何在类方法中激活路由？

import validator from './validator';

class Example {

  constructor(props) {
    super(props)
    this.saveAndContinue = thos.saveAndContinue.bind(this)
  }

  saveAndContinue () {
    var valid = validator.validate(this.props.form)
    if (valid) {
      axios.post('/path')
      <Redirect to='/other_tab'>
    } else {
      validator.showErrors()
    }
  }

  render() {
    <button onClick={this.saveAndContinue}>Save and Continue</button>
  }

}
2个回答

正如所讨论的，您应该可以history通过此处this.props.history所述的方式访问该对象。

如果您查看该push功能，这会将您重定向到您需要的任何路线。例如：

// Use push, replace, and go to navigate around.
this.props.history.push('/home', { some: 'state' })

https://reacttraining.com/react-router/web/api/history

就像炼狱说的那样，您可以在不使用的情况下完成它<Redirect />，但否则您可以使您的组件成为有状态的组件，然后像这样进行条件渲染

render() {
    !this.state.redirect ? 
      <button onClick={this.saveAndContinue}>Save and Continue</button> :
      <Redirect to='/other_tab'>
  }

并让saveAndContinue()改变组件状态。

saveAndContinue () {
    var valid = validator.validate(this.props.form)
    if (valid) {
      axios.post('/path')
      this.setState({redirect: true});
    } else {
      validator.showErrors()
    }
  }

当状态改变时，它会导致重新渲染，这次<Redirect />将被渲染。

注意：我实际上并没有运行这个代码片段，所以它可能包含（希望是轻微的）错误。

其它你可能感兴趣的问题
上一篇挤出机不会在内壁线上缩回从而导致拉丝 下一篇在 g-code 命令之间运行自定义代码？