Working with Query Parameters to switch signup/login Form

Author: zntb

frontend/src/components/AuthForm.js

@@ -1,15 +1,10 @@
-import { useState } from 'react';
-import { Form } from 'react-router-dom';
+import { Form, Link, useSearchParams } from 'react-router-dom';
 
 import classes from './AuthForm.module.css';
 
 function AuthForm() {
-  const [isLogin, setIsLogin] = useState(true);
-
-  function switchAuthHandler() {
-    setIsLogin((isCurrentlyLogin) => !isCurrentlyLogin);
-  }
-
+  const [searchParams] = useSearchParams();
+  const isLogin = searchParams.get('mode') === 'login';
   return (
     <>
       <Form method="post" className={classes.form}>
@@ -23,9 +18,9 @@ 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>
+          </Link>
           <button>Save</button>
         </div>
       </Form>

frontend/src/components/MainNavigation.js

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