title: How to pass route params in Context API
body: <p>I'm using the context API and I have this in my context file:</p>
  
  <pre><code>useEffect(() =&gt; {
      async function getSingleCountryData() {
        const result = await axios(
          `https://restcountries.eu/rest/v2/alpha/${props.match.alpha3Code.toLowerCase()}`
        );
        console.log(result)
        setCountry(result.data);
      }
      if (props.match) getSingleCountryData();
    }, [props.match]);
  </code></pre>
  
  <p>In the component I'm using, it doesn't work because it doesn't know what the props.match.alpha3Code is. How can I can pass the value? The alpha3Code is coming from the URL: <code>localhost:3000/country/asa</code> where <code>asa</code> is the alpha3Code, how can I get this value?</p>
  
  <p>Basically, what I'm trying to do is. I have a list of countries I listed out on the home page. Now I'm trying to get more information about a single country. The route is <code>/country/:alpha3Code</code> where <code>alpha3Code</code> is gotten from the API.</p>
  
  <p>FWIW, here is my full context file:</p>
  
  <pre><code>import React, { useState, createContext, useEffect } from 'react';
  import axios from 'axios';
  
  export const CountryContext = createContext();
  
  export default function CountryContextProvider(props) {
    const [countries, setCountries] = useState([]);
    const [country, setCountry] = useState([]);
  
    useEffect(() =&gt; {
      const getCountryData = async () =&gt; {
        const result = await axios.get(
          'https://cors-anywhere.herokuapp.com/https://restcountries.eu/rest/v2/all'
        );
        setCountries(result.data);
      };
      getCountryData();
    }, []);
  
    useEffect(() =&gt; {
      async function getSingleCountryData() {
        const result = await axios(
          `https://restcountries.eu/rest/v2/alpha/${props.match.alpha3Code.toLowerCase()}`
        );
        console.log(result)
        setCountry(result.data);
      }
      if (props.match) getSingleCountryData();
    }, [props.match]);
  
    return (
      &lt;CountryContext.Provider value={{ countries, country }}&gt;
        {props.children}
      &lt;/CountryContext.Provider&gt;
    );
  }
  </code></pre>
  
  <p>In the component I'm using the <code>country</code>, I have:
  <code>const { country } = useContext(CountryContext);</code></p>
  
  <p>I know I can do this from the component itself, but I'm learning how to use the context API, so I'm handling all API calls in my context.</p>
  
  <p>The API I'm making use of is <a href="http://restcountries.eu/" rel="nofollow noreferrer">here</a></p>
  
  <p><a href="https://codesandbox.io/s/github/peoray/where-in-the-world" rel="nofollow noreferrer">Codesandbox Link</a></p>
  
  <p>Project Github <a href="https://github.com/peoray/where-in-the-world" rel="nofollow noreferrer">link</a></p>