title: Rewriting React router v4 class based code to v6 functional based
body: <p>I'm trying to implement oauh login with react and spring boot and I've found a tutorial I can follow.</p>
  <p>The issue I have is that it is using React Router v4, I would like to update it to use React Router v6 and using Functional components instead.</p>
  <p><strong>Login.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './Login.css';
  import { GOOGLE_AUTH_URL, FACEBOOK_AUTH_URL, GITHUB_AUTH_URL, ACCESS_TOKEN } from '../../constants';
  import { login } from '../../util/APIUtils';
  import { Link, Redirect } from 'react-router-dom'
  import fbLogo from '../../img/fb-logo.png';
  import googleLogo from '../../img/google-logo.png';
  import githubLogo from '../../img/github-logo.png';
  import Alert from 'react-s-alert';
  
  
  class Login extends Component {
      componentDidMount() {
          // If the OAuth2 login encounters an error, the user is redirected to the /login page with an error.
          // Here we display the error and then remove the error query parameter from the location.
          if(this.props.location.state &amp;&amp; this.props.location.state.error) {
              setTimeout(() =&gt; {
                  Alert.error(this.props.location.state.error, {
                      timeout: 5000
                  });
                  this.props.history.replace({
                      pathname: this.props.location.pathname,
                      state: {}
                  });
              }, 100);
          }
      }
      
      render() {
          if(this.props.authenticated) {
              return &lt;Redirect
                  to={{
                  pathname: &quot;/&quot;,
                  state: { from: this.props.location }
              }}/&gt;;            
          }
  
          return (
              &lt;div className=&quot;login-container&quot;&gt;
                  &lt;div className=&quot;login-content&quot;&gt;
                      &lt;h1 className=&quot;login-title&quot;&gt;Login to SpringSocial&lt;/h1&gt;
                      &lt;SocialLogin /&gt;
                      &lt;div className=&quot;or-separator&quot;&gt;
                          &lt;span className=&quot;or-text&quot;&gt;OR&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;LoginForm {...this.props} /&gt;
                      &lt;span className=&quot;signup-link&quot;&gt;New user? &lt;Link to=&quot;/signup&quot;&gt;Sign up!&lt;/Link&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  class SocialLogin extends Component {
      render() {
          return (
              &lt;div className=&quot;social-login&quot;&gt;
                  &lt;a className=&quot;btn btn-block social-btn google&quot; href={GOOGLE_AUTH_URL}&gt;
                      &lt;img src={googleLogo} alt=&quot;Google&quot; /&gt; Log in with Google&lt;/a&gt;
                  &lt;a className=&quot;btn btn-block social-btn facebook&quot; href={FACEBOOK_AUTH_URL}&gt;
                      &lt;img src={fbLogo} alt=&quot;Facebook&quot; /&gt; Log in with Facebook&lt;/a&gt;
                  &lt;a className=&quot;btn btn-block social-btn github&quot; href={GITHUB_AUTH_URL}&gt;
                      &lt;img src={githubLogo} alt=&quot;Github&quot; /&gt; Log in with Github&lt;/a&gt;
              &lt;/div&gt;
          );
      }
  }
  
  </code></pre>
  <p><strong>App.js</strong></p>
  <ul>
  <li>This is the App.js with the routes, I have updated it to use Functional components and React Router v6.</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>//imports left out
  
  function App() {
  
    const [globalUserState, setGlobalUserState] = useState({
      authenticated: false,
      currentUser: null,
      loading: true
    });
  
    useEffect(() =&gt; {
      loadCurrentlyLoggedInUser();
    })
  
    const loadCurrentlyLoggedInUser = () =&gt; {
      getCurrentUser()
        .then(res =&gt; {
          setGlobalUserState({
            currentUser: res,
            authenticated: true,
            loading: false
          });
        }).catch(err =&gt; {
          setGlobalUserState({
            loading: false
          })
        })
    }
  
    const handleLogout = () =&gt; {
      localStorage.removeItem(ACCESS_TOKEN);
      setGlobalUserState({
        authenticated: false,
        currentUser: null
      });
      Alert.success(&quot;You're safely logged out!&quot;);
    }
  
  
    return (
      &lt;Router&gt;
        &lt;div className=&quot;app&quot;&gt;
  
          &lt;div className=&quot;app-header&quot;&gt;
            &lt;AppHeader /&gt;
          &lt;/div&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
            &lt;Route path=&quot;/profile&quot; element={&lt;SecuredRoute&gt; &lt;Profile /&gt; &lt;/SecuredRoute&gt;} /&gt;
            &lt;Route path=&quot;/login&quot; element={(props) =&gt; &lt;Login authenticated={globalUserState.authenticated} {...props} /&gt;} /&gt;
            &lt;Route path=&quot;/signup&quot; element={(props) =&gt; &lt;Signup authenticated={globalUserState.authenticated} {...props} /&gt;} /&gt;
            &lt;Route path=&quot;/oauth2/redirect&quot; element={&lt;OAuth2RedirectHandler /&gt;} /&gt;
            &lt;Route path=&quot;*&quot; element={&lt;Notfound /&gt;} /&gt;
          &lt;/Routes&gt;
   
          &lt;Alert stack={{limit: 3}} 
            timeout = {3000}
            position='top-right' effect='slide' offset={65} 
          /&gt;
         &lt;/div&gt;
    &lt;/Router&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <hr />
  <p><strong>What I would like clarity on</strong></p>
  <ol>
  <li><p>I'm struggling to understand the equivalent of the react router functionalities with v6 (location.state.error, history.replace, location.pathname etc) and functional components instead of class based.</p>
  </li>
  <li><p>Also, If someone can explain this line please
  <code>&lt;LoginForm {...this.props} /&gt;</code></p>
  </li>
  </ol>