How to use React Router to pass data

Question

I am trying to understand how to pass data using React Router in my situation of using a form. I am currently creating a workout app and one of my pages is a survey for the user to fill out. Once the user has filled this survey out the data would be passed on to a file called personalExercise.js. In this personalExercise file, I would use conditional rendering to determine where the user is best suited per their preference.

Description of the attempted action:

Step 1). The user would answer the questions in the survey (from the file question.js) and the answers would be submitted to the console.

Step2). Once the questions are submitted the data would be passed on to a file(file called personalExercise.js), where conditional rendering would be used to send the user to a page set to their exercise type.

Ex. In question.js file a user selects:

1. Male
2. 18-28
3. Stay Active

• The data then is transferred to the file personalExercise.js Where through a conditional statement, the user would be sent to a specific page. Ex. if (gender === male && userAge === young && goals === loose weight) { return (page specified to user) }

This is an idea and I am trying to use react Router to perform this task. Google has been my friend and enemy during my research.

import React from 'react';
import Introduction from './components/introduction';
import Questions from './components/beginning';
import Male from './components/questions';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

 export default function App() {
  return (
    <Router>
      <Routes>
        <Route path= "/" element={<Introduction />} />
        <Route path="/beginning" element= {<Questions />} />
        <Route path="/questions" element= {<Male />} />
      </Routes>
    </Router>
  );
}

PersonalExercise

import React from 'react';
import {NavLink} from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css'

//purpose: To have the user see their specific exercises.

function personalExercise(formData) {

}


// function workout(){

// }

Questions

import React, {useState} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import Form from 'react-bootstrap/Form';


export default function Questions() {
    
    const[formData, setFormData] = useState({
        gender: "", 
        userAge: "", 
        goals:"", 
    });

    function handleChange(event) {
        const { name, value, type, checked } = event.target;
       setFormData(prevFormData => {
        return {
            ...prevFormData,
            [name]: type === 'checkbox' ? checked : value 
        };
       });
    }

    function handleSubmit(event) {
        event.preventDefault()
        console.log(formData)
       };

    return (
        <>
        <header>Questions</header>

        <Form onSubmit={handleSubmit}>
            <fieldset>
            <legend>What was your gender at birth</legend>
                <input 
                type='radio'
                id = 'male'
                name = 'gender' 
                value = 'male'
                checked={formData.gender === "male"}
                onChange={handleChange}
                />
                <label htmlFor="male"> Male </label>
                <br />

                <input 
                type='radio'
                id='female'
                name='gender'
                value = 'female' 
                checked={formData.gender === "female"}
                onChange={handleChange}
                />
                <label htmlFor="female"> Female </label>
                <br />
            </fieldset>

                    <fieldset>
                        <legend>How old are you?</legend>

                        <input 
                        type='radio'
                        id="young"
                        name="userAge"
                        value="young"
                        checked={formData.userAge === "young"}
                        onChange={handleChange}
                        />
                        <label htmlFor="young"> 18-28 </label>
                        <br />

                        <input 
                        type='radio'
                        id="middleAged"
                        name="userAge"
                        value="middleAged"
                        checked={formData.userAge === "middleAged"}
                        onChange={handleChange}
                        />
                        <label htmlFor="middleAged"> 29-39 </label>
                        <br />

                        <input 
                        type='radio'
                        id="older"
                        name="userAge"
                        value="older"
                        checked={formData.userAge === "older"}
                        onChange={handleChange}
                        />
                        <label htmlFor="older"> 40-50 </label>
                        <br />

                        <input 
                        type='radio'
                        id="senior"
                        name="userAge"
                        value="senior"
                        checked={formData.userAge === "senior"}
                        onChange={handleChange}
                        />
                        <label htmlFor="senior"> 51+ </label>
                        <br />
                    </fieldset>
                    <br />

                    <fieldset>
                        <legend>What kind of fitness would you prefer?</legend>

                        <input 
                        type="radio"
                        id="active"
                        name="goals"
                        value="active"
                        checked = {formData.goals === "active"}
                        onChange={handleChange}
                        />
                        <label htmlFor='active'>To stay active!</label>
                        <br />

                        <input
                        type="radio"
                        id="weight"
                        name="goals"
                        value= "weight"
                        checked = {formData.goals === "weight"}
                        onChange={handleChange}
                        />
                        <label htmlFor="weight"> To loose weight</label>
                    </fieldset>
                    <br />

                    <button type='submit'>Submit</button>
                    </Form>


                </>
    )
}

Answer 1

You can try passing in a function like this in App.js

export default function App() {

  const [data, setData] = useState({})

  const getData = (data) =>{ 
    setData(data)
  }
      
  return (
    <Router>
      <Routes>
        <Route path= "/" element={<Introduction />} />
        <Route path="/beginning" element={<Questions getData={getData}/>} />
        <Route path="/personalExercise" element={<personalExercise data={data}/>} />
        <Route path="/questions" element= {<Male />} />
      </Routes>
    </Router>
  );
}

Then in your questions.js you can use the function like this

export default function Questions(props) {

   function handleSubmit(event) {
        event.preventDefault()
        props.getData(formData)
       };
}

And to access the data in personalExercise.js you can call props.data like this

export default function personalExercise(props){

  return (
    <>
      {props.data}//whatever you want to conditionally render
    </>
  );
}