title: I can not get the state from react router Link component using useLocation. So how can I pass it?
body: <p>I'm trying to pass the videoTitle from Link's state to my Quiz page. But I can not pass it through useLocation. It throws me this error: TypeError: Cannot destructure property 'state' of 'location' as it is undefined.</p>
  <p>From this link component:</p>
  <p><a href="https://i.stack.imgur.com/9lOTz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9lOTz.png" alt="linking" /></a></p>
  <p>To this:</p>
  <p><a href="https://i.stack.imgur.com/ugPsT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ugPsT.png" alt="accessing link state" /></a></p>
  <p>here is the full code of Videos page:</p>
  <pre><code>import React, { useState } from 'react';
  import InfiniteScroll from 'react-infinite-scroll-component';
  import { Link } from 'react-router-dom';
  import useVideoList from '../hooks/useVideoList';
  import classes from '../styles/Videos.module.css';
  import Video from './Video';
  
  export default function Videos() {
    const [page, setPage] = useState(1);
    const { loading, error, videos, hasMore } = useVideoList(page);
  
    return (
      &lt;div className={classes.videos}&gt;
        {videos.length &gt; 0 &amp;&amp; (
          &lt;InfiniteScroll
            dataLength={videos.length}
            next={() =&gt; setPage(page + 9)}
            hasMore={hasMore}
            loader={&lt;h4&gt;Loading...&lt;/h4&gt;}
            endMessage={
              &lt;p style={{ textAlign: 'center' }}&gt;
                &lt;b&gt;Yay! You have seen it all&lt;/b&gt;
              &lt;/p&gt;
            }
          &gt;
            {videos.map((video) =&gt;
              video.noq &gt; 0 ? (
                &lt;Link
                  to={{
                    pathname: `/quiz/${video.youtubeID}`,
                    state: {
                      videoTitle: video.title,
                    },
                  }}
                  key={video.youtubeID}
                &gt;
                  &lt;Video
                    title={video.title}
                    id={video.youtubeID}
                    noq={video.noq}
                  /&gt;
                &lt;/Link&gt;
              ) : (
                &lt;Video
                  title={video.title}
                  id={video.youtubeID}
                  noq={video.noq}
                  key={video.youtubeID}
                /&gt;
              )
            )}
          &lt;/InfiniteScroll&gt;
        )}
        {!loading &amp;&amp; videos.length === 0 &amp;&amp; &lt;div&gt;No data found!&lt;/div&gt;}
        {error &amp;&amp; &lt;div&gt;There was an error!&lt;/div&gt;}
        {loading &amp;&amp; &lt;div&gt;Loading...&lt;/div&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Here is the full code of Quiz page and where I want to pass the videoTitle from Link component:</p>
  <pre><code>import { getDatabase, ref, set } from 'firebase/database';
  import _ from 'lodash';
  import React, { useEffect, useReducer, useState } from 'react';
  import { useLocation, useNavigate, useParams } from 'react-router';
  import { useAuth } from '../../context/AuthContext';
  import useQuestions from '../../hooks/useQuestions';
  import Answers from '../Answers';
  import MiniPlayer from '../MiniPlayer';
  import ProgressBar from '../ProgressBar';
  
  const initialState = null;
  
  const reducer = (state, action) =&gt; {
    switch (action.type) {
      case 'questions':
        action.value.forEach((question) =&gt; {
          question.options.forEach((option) =&gt; {
            option.checked = false;
          });
        });
        return action.value;
  
      case 'answer':
        const questions = _.cloneDeep(state);
        questions[action.questionID].options[action.optionIndex].checked =
          action.value;
  
        return questions;
  
      default:
        return state;
    }
  };
  
  export default function Quiz() {
    const { id } = useParams();
    const { loading, error, questions } = useQuestions(id);
    const [currentQuestion, setCurrentQuestion] = useState(0);
  
    const [qna, dispatch] = useReducer(reducer, initialState);
    const navigate = useNavigate();
  
    const { location } = useLocation();
    const { state } = location;
    const { videoTitle } = state;
  
    const { currentUser } = useAuth();
  
    useEffect(() =&gt; {
      dispatch({
        type: 'questions',
        value: questions,
      });
    }, [questions]);
  
    function handleAnswerChange(e, index) {
      dispatch({
        type: 'answer',
        questionID: currentQuestion,
        optionIndex: index,
        value: e.target.checked,
      });
    }
  
    // handle when user hit the next button to get next questions
  
    function nextQuestion() {
      if (currentQuestion + 1 &lt; questions.length) {
        setCurrentQuestion((prevCurrent) =&gt; prevCurrent + 1);
      }
    }
  
    // handle when user hit the prev button to get the prev questions
  
    function prevQuestion() {
      if (currentQuestion &gt;= 1 &amp;&amp; currentQuestion &lt;= questions.length) {
        setCurrentQuestion((prevCurrent) =&gt; prevCurrent - 1);
      }
    }
  
    // submit quiz
  
    async function submit() {
      const { uid } = currentUser;
  
      const db = getDatabase();
      const resultRef = ref(db, `result/${uid}`);
  
      await set(resultRef, {
        [id]: qna,
      });
  
      navigate(`/result/${id}`, {
        state: {
          qna,
        },
      });
    }
  
    //calculate percentage of progress
    const percentage =
      questions.length &gt; 0 ? ((currentQuestion + 1) / questions.length) * 100 : 0;
  
    return (
      &lt;&gt;
        {loading &amp;&amp; &lt;div&gt;Loading...&lt;/div&gt;}
        {error &amp;&amp; &lt;div&gt;There was an error!&lt;/div&gt;}
        {!loading &amp;&amp; !error &amp;&amp; qna &amp;&amp; qna.length &gt; 0 &amp;&amp; (
          &lt;&gt;
            &lt;h1&gt;{qna[currentQuestion].title}&lt;/h1&gt;
            &lt;h4&gt;Question can have multiple answers&lt;/h4&gt;
            &lt;Answers
              input
              options={qna[currentQuestion].options}
              handleChange={handleAnswerChange}
            /&gt;
            &lt;ProgressBar
              next={nextQuestion}
              prev={prevQuestion}
              submit={submit}
              progress={percentage}
            /&gt;
            &lt;MiniPlayer id={id} title={videoTitle} /&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    );
  }
  </code></pre>