title: react-router-dom 6: Route to different element programmatically
body: <p>I have a Class App.js, with elements
  SignInAndSignUpPage (&quot;/signin&quot;) and HomePage (&quot;/&quot;). When a user logs in (through a Firebase db), I'd like to make the login/SignInAndSignUp page become inaccessible until they click a Sign Out button in a Header element.</p>
  <pre><code>  render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;HomePage /&gt;} /&gt;
            &lt;Route path=&quot;/shop&quot; element={&lt;ShopPage /&gt;} /&gt;
            &lt;Route path=&quot;/signin&quot; element={&lt;SignInAndSignUpPage /&gt;} /&gt;
            {/* pass the currentUser state as a prop */}
            {this.props.currentUser
              ? ((&lt;Route path=&quot;/&quot; element={&lt;HomePage /&gt;} /&gt;),
                console.log(`&quot;current user info:&quot; ${this.props.currentUser}`))
              : ((&lt;Route path=&quot;/signin&quot; element={&lt;SignInAndSignUpPage /&gt;} /&gt;),
                console.log(&quot;sign in&quot;))}
          &lt;/Routes&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>I'm trying to use a ternary operator to determine if this.props.currentUser is not null, then route to the HomePage. If it's null, go to the SignInAndSignUp page.</p>
  <p>Logging shows me that this.props.currentUser is not null, and it drops into the correct call <code>(&lt;Route path=&quot;/&quot; element={&lt;HomePage /&gt;} /&gt;)</code>when it's supposed to, but still the login page is rendered.</p>
  <p>Removing the <code>&lt;Route path=&quot;/signin&quot; element={&lt;SignInAndSignUpPage /&gt;} /&gt;</code> call only removes the child components inside SignInAndSignUp but still doesn't route to HomePage.</p>
  <p>Another way to put it, what I'm trying to achieve, is when a user logs in the page should be routed to the home page, and if they're currently logged in and try to manually update the url to get to the /signin page, they should be routed to the home page.</p>
  <p>EDIT: Tried the ternary operator and the PrivateRoute, neither seemed to work. The ternary operator is commented out right now. Here's what the console is outputting, at least in regard to the action and payload. Payload would be null if currentUser was null. <a href="https://i.stack.imgur.com/cEcaG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cEcaG.png" alt="enter image description here" /></a></p>
  <pre><code>render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;HomePage /&gt;} /&gt;
            &lt;Route path=&quot;/shop&quot; element={&lt;ShopPage /&gt;} /&gt;
            &lt;Route path=&quot;/signin&quot; element={&lt;SignInAndSignUpPage /&gt;} /&gt;
            &lt;Route
              path=&quot;/&quot;
              element={
                &lt;PrivateRoute currentUser={this.props.currentUser}&gt;
                  &lt;HomePage /&gt;
                &lt;/PrivateRoute&gt;
              }
            /&gt;
            {/* &lt;Route
              path=&quot;/&quot;
              element={
                this.props.currentUser ? &lt;HomePage /&gt; : &lt;Navigate to=&quot;/signin&quot; /&gt;
              }
            /&gt; */}
            {/* pass the currentUser state as a prop */}
            {/* {this.props.currentUser
              ? ((&lt;Route path=&quot;/&quot; element={&lt;HomePage /&gt;} /&gt;),
                console.log(`&quot;current user info:&quot; ${this.props.currentUser}`))
              : ((&lt;Route path=&quot;/signin&quot; element={&lt;SignInAndSignUpPage /&gt;} /&gt;),
                console.log(&quot;sign in&quot;))} */}
          &lt;/Routes&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>Here's the code for the PrivateRoute:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Navigate } from &quot;react-router&quot;;
  
  const PrivateRoute = ({ children, ...props }) =&gt; {
    return props.currentUser ? children : &lt;Navigate to=&quot;signin&quot; /&gt;;
  };
  
  export default PrivateRoute;
  </code></pre>