title: Getting an error when useParams is invoked
body: <p>Here's a Link component that I made:</p>
  <pre><code>const Restaurants = () =&gt; {
    const meatList = require('./Meat-Shops.json');
  
    return meatList.map((restaurant) =&gt; {
      return (
        &lt;Link to={`/menu/${restaurant.store_name}`}&gt;
          &lt;div className=&quot;restaurant-container&quot;&gt;
            &lt;div className=&quot;image-container&quot;&gt;
              &lt;img src={restaurant.image} alt={restaurant.alt} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;info-container&quot; &gt;
              &lt;h4&gt;{restaurant.store_name}&lt;/h4&gt;
              &lt;h5&gt;Pick-up&lt;/h5&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
  
      );
    })
  }
  
  </code></pre>
  <p>When pressed, it will take me (or render) this component:</p>
  <pre><code>import React, { useState } from 'react';
  import { useParams } from 'react-router-dom'
  
  
  
  const Menu = () =&gt; {
      console.log(useParams());
      return (
          &lt;div&gt;
              &lt;p&gt;Hello world&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  
  export default Menu
  
  </code></pre>
  <p>What I am trying to do is to access <code>restaurant.store_name</code> (the URL parameter, variable at the end of the template string of the 'to' prop of the Link component) within the Menu component by using useParams(). But when I invoke useParams(), I get the following error:
  <a href="https://i.stack.imgur.com/vb2NM.png" rel="nofollow noreferrer">error_message_invalid_hook</a>. What I am doing wrong? Also, here is the file that contains the  Router tags, if needed:</p>
  <pre><code>import React from 'react'
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import Menu from './Menu';
  import Restaurants from './Restaurants';
  import NavBar from &quot;./NavBar&quot;
  
  const Pages = () =&gt; {
      return (
          &lt;Router&gt;
              &lt;NavBar /&gt;
              &lt;Switch&gt;
                  &lt;Route exact path=&quot;/&quot;&gt;
                      &lt;Restaurants /&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/menu/:store_name&quot; children={&lt;Menu /&gt;} /&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
      )
  }
  
  export default Pages;
  
  </code></pre>
  <p>And here is the error message when I set:</p>
  <pre><code>const { menu } = useParams();
  </code></pre>
  <p>within the body of the 'menu' component (error message: <a href="https://i.stack.imgur.com/ioJ30.jpg" rel="nofollow noreferrer">error_message_for_useParams</a>).</p>
  <p>You can also check out all of my code for the components (the Menu and Restaurants components) here on my GitHub: <a href="https://github.com/Toriong/quick_eat_carnivore_search_and_delivery" rel="nofollow noreferrer">https://github.com/Toriong/quick_eat_carnivore_search_and_delivery</a></p>