title: redirect to new page after login in react
body: <p>I'm having some issue with redirecting to home page after user login / sign up-- hope someone can help.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
    unsubscribeFromAuth = null;
  
    componentDidMount() {
      //create user if it doesn't exist
      const {
        setCurrentUser
      } = this.props;
      this.unsubscribeFromAuth = auth.onAuthStateChanged(async(userAuth) =&gt; {
        if (userAuth) {
          const userRef = await createUserProfileDocument(userAuth);
  
          userRef.onSnapshot((snapShot) =&gt; {
            setCurrentUser({
              id: snapShot.id,
              ...snapShot.data(),
            });
          });
        } else {
          setCurrentUser(userAuth);
        }
      });
    }
  
    componentWillUnmount() {
      this.unsubscribeFromAuth();
    }
  
    render() {
      return ( &lt;
        div className = 'App' &gt;
        &lt;
        Router &gt;
        &lt;
        HeaderContainer &gt;
        &lt;
        Header / &gt;
        &lt;
        /HeaderContainer&gt;
  
        &lt;
        Routes &gt;
        &lt;
        Route element = { &lt; ProtectedRoute / &gt;
        } &gt;
        &lt;
        Route path = '/'
        element = { &lt; HomePage / &gt;
        }
        /&gt; &lt;
        /Route&gt;
  
        &lt;
        Route exact path = '/hello'
        element = { &lt; LandingPage / &gt;
        }
        /&gt;
  
        &lt;
        Route exact path = '/signup'
        element = { &lt; SignUp / &gt;
        }
        /&gt; { /* &lt;Route exact path='/signin' element={&lt;SignIn /&gt;} /&gt; */ } &lt;
        Route exact path = '/signin'
        render = {
          () =&gt;
          this.props.currentUser ? &lt; Navigate to = '/' / &gt; : &lt; SignIn / &gt;
        }
        /&gt; &lt;
        /Routes&gt; &lt;
        /Router&gt; &lt;
        /div&gt;
      );
    }
  }
  
  const mapStateToProps = ({
    user
  }) =&gt; ({
    currentUser: user.currentUser,
  });
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    setCurrentUser: (user) =&gt; dispatch(setCurrentUser(user)),
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);</code></pre>
  </div>
  </div>
  </p>
  <p>I have this in my app JS-- where the proposed redirect shows a blank screen..</p>
  <p>console:</p>
  <pre><code>Matched leaf route at location &quot;/signin&quot; does not have an element. This means it will render an &lt;Outlet /&gt; with a null value by default resulting in an &quot;empty&quot; page. warning @ index.tsx:25
  </code></pre>
  <p>However, if I just rendered SignIn page as</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;Route exact path='/signin' element={&lt;SignIn /&gt;} /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It runs fine without transitioning onto home screen from sign in page.. user has to manually</p>