React-Router-DOM: How to pass in props within a Redirect

A-Signup.js

// Link to article: https://patricia-pan.medium.com/react-router-dom-how-to-pass-in-props-within-a-redirect-d414a46bcd60

// The below code is for a React component (Signup.js) where a user fills out a form to create an account. 
// Afterward, the page redirects to the Login page (Login.js) where the email address is already populated.

import React, { useState } from 'react' // Using function-based React.
import { Redirect } from 'react-router-dom'

const Signup = (props) => {
  // Our state variables.
  let [redirect, setRedirect] = useState(false)    
  let [email, setEmail] = useState('')
  let [password, setPassword] = useState('')
  let [confirmPassword, setConfirmPassword] = useState('')
  let [error, setError] = useState(false)
  
  // Our event handlers.
  const handleEmail = (e) => setEmail(e.target.value)
  const handlePassword = (e) => setPassword(e.target.value)
  const handleConfirmPassword = (e) => setConfirmPassword(e.target.value)  
  const handleSubmit = (e) => {
      e.preventDefault(); // Prevent page from refreshing.
      if (password === confirmPassword) {
          const newUser = { name, weight, DOB, email, password }
          // Insert 'create account' magic here. We used Axios to post to our Mongo Atlas database.
          .then(response => {
            // Set the flag to redirect to Login page.
            setRedirect(true)
          })        
          .catch(error => {
              console.log("Error signing up: ", error)
              setError(true)
          })
      }
    }
  
  // Redirect to Login page after signing up.
  if (redirect) return <Redirect to={ {pathname: '/login', state: {email: email}} } />

  let errorMessage = error ? (
        <p className='error'>Error creating account</p>
  ) : (null)
  
  return (
     <div className="signup-page">
        <h2>Signup</h2>
        {errorMessage}
        <Form onSubmit={handleSubmit} className='signup-form'>
            <div>
                <label htmlFor="email">Email</label>
                <input type="email" name="email" value={email} onChange={handleEmail} required />
            </div>
            <div>
                <label htmlFor="password">Password <em>(min 5 chars)</em></label>
                <input type="password" name="password" value={password} onChange={handlePassword} className="form-control" required />
            </div>     
            <div>
                <label htmlFor="confirmPassword">Confirm Password</label>
                <input type="password" name="confirmPassword" value={confirmPassword} onChange={handleConfirmPassword} className="form-control" required/>
            </div>
            <button type="submit">Submit</button>
        </Form>
    </div>     
    )
 }

export default Signup

B-Login.js

// Link to article: https://patricia-pan.medium.com/react-router-dom-how-to-pass-in-props-within-a-redirect-d414a46bcd60

import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';

const Login = (props) => {
    // props.location.state is from our 'Create Account' Redirect. Use a ternary to set to either that or to '' if it exists. 
    let [email, setEmail] = useState(props.location.state.email ? props.location.state.email : '');
    let [password, setPassword] = useState('');

    let handleEmail = (e) => setEmail(e.target.value)
    let handlePassword = (e) => setPassword(e.target.value)

    let handleSubmit = (e) => {
        e.preventDefault() // Prevent refresh.
        const userData = { email, password };
        // Insert 'sign in' magic here. We used Axios to access our Mongo Atlas database to verify credentials.
    }
    return (
        <Form onSubmit={handleSubmit} className="form-formatting">
            <div>
                <label htmlFor="email">Email</label>
                <input type="text" name="email" value={email} onChange={handleEmail} required />
            </div>
            <div>
                <label htmlFor="password">Password</label>
                <input type="password" name="password" value={password} onChange={handlePassword} required />
            </div>
            <button type="submit">Submit</button>
        </Form>   
    )
}

export default Login