title: Cannot read properties of undefined react router on page refresh
body: <p>I am making a recipe app by using Edamam recipe API.Every thing is working fine until I refresh Recipe Detail page.when I open a recipe it works fine but when I refresh page for example <code>http://localhost:3000/recipe/Pasta%20alla%20Gricia%20Recipe</code> it gives me an error :</p>
  <p><code> Cannot read properties of undefined (reading 'recipe')</code></p>
  <p>I dont know why is this happening.It is working when the page is not refreshed.</p>
  <p>App.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import Home from &quot;./pages/Home&quot;;
  import ShowRecipe from &quot;./pages/ShowRecipe&quot;;
  import RecipeDetail from &quot;./pages/RecipeDetail.js&quot;;
  import {
    Routes,
    Route,
    Link
  } from &quot;react-router-dom&quot;;
  
  function App(){
    return(
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to=&quot;/recipe&quot;&gt;Recipe&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
          &lt;Route path=&quot;/recipe&quot; element={&lt;ShowRecipe /&gt;} /&gt;
          &lt;Route path=&quot;/recipe/:recipeId&quot; element={&lt;RecipeDetail /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/div&gt;
    )
  }
  
  export default App;
  
  </code></pre>
  <p>ShowRecipe.js:</p>
  <pre><code>import React,{useContext,useState,useEffect} from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import {Context} from &quot;../Context&quot;
  
  function ShowRecipe(){
  
    const {recipes,getSearch,search,handleChange} = useContext(Context)
  
       let dispRecipe = recipes.map(recipe =&gt; (
             &lt;div&gt;
               &lt;img src={recipe.recipe.image} /&gt;
              &lt;Link to={`/recipe/${recipe.recipe.label}`}&gt;&lt;h1&gt;{recipe.recipe.label}&lt;/h1&gt;&lt;/Link&gt;
               &lt;p&gt;{recipe.recipe.calories}&lt;/p&gt;
             &lt;/div&gt;
           ))
  
    return(
      &lt;div&gt;
        &lt;form onSubmit={getSearch}&gt;
          &lt;input type=&quot;text&quot; value={search} onChange={handleChange}/&gt;
          &lt;button type=&quot;submit&quot;&gt;Search&lt;/button&gt;
        &lt;/form&gt;
  
         {dispRecipe}
  
      &lt;/div&gt;
    )
  }
  
  export default ShowRecipe;
  
  </code></pre>
  <p>RecipeDetail.js:</p>
  <pre><code>import React,{useContext} from 'react';
  import {useParams} from &quot;react-router-dom&quot;
  import {Context} from &quot;../Context&quot;
  
  
  
  function RecipeDetail(){
  
      const {recipes} = useContext(Context)
      const {recipeId} = useParams()
  
      const currentRecipe = recipes.find(recipe =&gt; recipe.recipe.label === recipeId)
  
      return(
          &lt;div&gt;
              &lt;h1&gt;{currentRecipe.recipe.label}&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  export default RecipeDetail
  </code></pre>
  <p>Context.js:</p>
  <pre><code>import React, {useState, useEffect} from &quot;react&quot;
  
  const Context = React.createContext()
  
  function  ContextProvider({children}) {
      const API_KEY = &quot;648ac4cc09c9168758cc92c64b18ecfc&quot;
    const API_ID = &quot;854d3ad3&quot;
  
    const [recipes , setRecipes] = useState([])
    const [search, setSearch] = useState(&quot;&quot;)
    const [query, setQuery] = useState(&quot;pasta&quot;)
  
    let example =`https://api.edamam.com/search?q=${query}&amp;from=0&amp;to=20&amp;app_id=${API_ID}&amp;app_key=${API_KEY}`
  
    useEffect(()=&gt;{
      fetch(example)
        .then(res =&gt; res.json())
        .then(data =&gt; {
            setRecipes(data.hits);
            console.log(data)
        })
    }, [query])
  
    const handleChange = (e) =&gt; {
      setSearch(e.target.value)
      console.log(search)
    }
  
    const getSearch = (e) =&gt; {
      e.preventDefault()
      setQuery(search)
    }
  
    console.log(recipes)
  
    return (
          &lt;Context.Provider value={{
              recipes,
              search,
              getSearch,
              handleChange,
          }}&gt;
              {children}
          &lt;/Context.Provider&gt;
      )
  
  }
  
  export {ContextProvider, Context}
  </code></pre>