Question

注册或登录首页（'/'）后，我试图重定向。

我尝试将this.props.redirect('/')的迭代放入handleLogin函数中。

还尝试创建另一个功能，将Redirect设置为true，以触发react-router重定向。

希望通过onClick传递两个功能，或者向现有功能添加下一步。

constructor() {
    super()

    this.state = {
      email: '',
      password: '',
      isLoggedIn: false
    }

    this.handleInput = this.handleInput.bind(this)
    this.handleLogIn = this.handleLogIn.bind(this)\
  }

  componentDidMount () {
    if (localStorage.token) {
      this.setState({
        isLoggedIn: true
      })
    } else {
      this.setState({
        isLoggedIn: false
      })
    }
  }

  handleInput (e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleLogIn (e) {
    e.preventDefault()
    axios.post('http://localhost:3001/users/login', {
      email: this.state.email,
      password: this.state.password
    })
    .then(response => {
      localStorage.lettuceId = response.data.id
      console.log(localStorage.lettuceId)
      localStorage.token = response.data.token
      this.setState({isLoggedIn: true})
    })
    .catch(err => console.log(err))
  }

class LogIn extends Component {

    render() {
        return (
            <div className="main-form">
                <h2>Log In</h2>
                <form className="form-wrapper">
                <div>
                    <input type='text' name='email' className="form" placeholder='Email' onChange={this.props.handleInput} />
                </div>
                <div>
                    <input type='password' name='password' className="form" placeholder='Password' onChange={this.props.handleInput} />
                </div>
                <input value='Submit' type='submit' className="button" onClick={this.props.handleLogIn} />
                </form>
            </div>
        );
    }
}

Answer 1

如果要使用withRouter包装组件，则可以在props中使用history对象进行重定向，例如

//After some actions
this.props.history.push('/')

或者作为登录后的设置状态，您可以使用

 handleRedirect = () => {
 this.state.isLoggedIn ? <Redirect to='/' /> : null
 }

并在渲染函数中调用此方法（如果要使用后面的选项，则需要从路由器导入重定向）

登录或注销后无法在react-router中重定向到react

1 个答案: