Working with Query Parameters

Author: ThomasCode92

frontend/src/components/AuthForm.js

@@ -1,17 +1,15 @@
-import React, { useState } from 'react';
-import { Form } from 'react-router-dom';
+import React, { Fragment } from 'react';
+import { Form, Link, useSearchParams } from 'react-router-dom';
 
 import classes from './AuthForm.module.css';
 
 function AuthForm() {
-  const [isLogin, setIsLogin] = useState(true);
+  const [searchParams] = useSearchParams();
 
-  function switchAuthHandler() {
-    setIsLogin(isCurrentlyLogin => !isCurrentlyLogin);
-  }
+  const isLogin = searchParams.get('mode') === 'login';
 
   return (
-    <>
+    <Fragment>
       <Form method="post" className={classes.form}>
         <h1>{isLogin ? 'Log in' : 'Create a new user'}</h1>
         <p>
@@ -23,13 +21,13 @@ function AuthForm() {
           <input id="password" type="password" name="password" required />
         </p>
         <div className={classes.actions}>
-          <button onClick={switchAuthHandler} type="button">
+          <Link to={`?mode=${isLogin ? 'signup' : 'login'}`}>
             {isLogin ? 'Create new user' : 'Login'}
-          </button>
-          <button>Save</button>
+          </Link>
+          <button>{isLogin ? 'Login' : 'Save'}</button>
         </div>
       </Form>
-    </>
+    </Fragment>
   );
 }
 

frontend/src/components/MainNavigation.js

@@ -42,7 +42,7 @@ function MainNavigation() {
           </li>
           <li>
             <NavLink
-              to="/auth"
+              to="/auth?mode=login"
               className={({ isActive }) =>
                 isActive ? classes.active : undefined
               }