反应路由器重定向条件答案

【问题标题】：React Router Redirect Conditional反应路由器重定向条件
【发布时间】：2017-08-21 21:40:25
【问题描述】：

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

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

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

}

【问题讨论】：

您应该可以使用this.props.history.push 而不是<Redirect ... />
@Purgatory 完全正确，谢谢！
我已添加答案供您接受。

标签： reactjs react-router conditional

【解决方案1】：

如上所述，您应该可以通过this.props.history 访问history 对象，如here 所述。

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

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

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

【讨论】：

【解决方案2】：

就像Purgatory 说你可以不使用<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 />。

注意：我实际上并没有运行此代码 sn-p，因此它可能包含（希望是轻微的）错误。

【讨论】：

小错误修复：重定向相应的关闭标签。