Why am I not being redirect to my selected path? React Router

Question

I'm having a little problem, I have an auth system and I want to navigate to that when I login or signup. My page redirects to the principal path / but it's not working.

I'm trying to do this:

render() {
    const { redirect } = this.state.redirect;

    if (redirect) {
      return <Redirect to="/" />;
    } else {
      return (
        <div>
          <RegisterForm
            data={this.state}
            handleChange={this.handleChange}
            handleSubmit={this.handleSubmit}
          />
        </div>
      );
    }
  }

And when i register with firebase I use

.then(() => {
          const currentUser = firebase.auth().currentUser;

          currentUser.updateProfile({ displayName: this.state.username });

          alert("Account created!");

          this.setState({ ...this.state, redirect: true });
        })

Where's the problem?

Answer 1

It seems like you made a typo when deconstructing your state :

render() {
    const { redirect } = this.state.redirect;

Should be :

render() {
    const { redirect } = this.state;

It may not be the only problem though

Also, you can reduce you render function to the following :

  render() {
    const { redirect } = this.state.redirect;

    return redirect ? <Redirect to="/" />
        :
        <div>
          <RegisterForm
            data={this.state}
            handleChange={this.handleChange}
            handleSubmit={this.handleSubmit}
          />
        </div>
  }