Не удается перенаправить в реакции-маршрутизатор в реагировать после входа или выхода из системы

Question

Я пытаюсь перенаправить после регистрации или входа на домашнюю страницу ('/').

Я пробовал вводить итерации this.props.redirect('/') в функции handleLogin.

Также пробовалчтобы создать другую функцию, настройку Redirect на true, чтобы инициировать перенаправление реагирующего маршрутизатора.

Нужно либо передать две функции через 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, то вы можете использовать объект истории в реквизитах для перенаправления, например

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

. Или, когда вы устанавливаете состояние после входа в систему, вы можете использовать, например,

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

И вызвать этот метод в функции рендеринга (вам нужно импортировать перенаправление с маршрутизатора, если вы хотите использовать более позднюю опцию)