title: How do i pass props in react router component?
body: <p>I'm quite new to react and trying to understand how to pass props.</p>
  
  <p>1st i have set a Navlink component which holds a subcategories property :</p>
  
  <pre><code>&lt;NavLink
    catid={category.id}
    to={category.route}
    catname={category.name}
    subcategories={category.subcategories}
  &gt;
    {category.name}
  &lt;/NavLink&gt;
  </code></pre>
  
  <p><code>{category.route}</code>, <code>{category.name}</code>, <code>{category.subcategories}</code> are fetched from json file, so this part is OK.</p>
  
  <p>Each route is defined so:</p>
  
  <pre><code>&lt;Route
    path='/epicerie-sucree'
    render={(props) =&gt; (
      &lt;CategoryPage
        {...props}
        catid={10}
        catname={"Epicerie sucrée"}
        subcategories={props.subcategories}
      /&gt;
    )}
  /&gt;
  </code></pre>
  
  <p>so it renders a component named <code>&lt;CategoryPage/&gt;</code></p>
  
  <p>And here's the code of the CategoryPage Component :</p>
  
  <pre><code>export default function CategoryPage(props) {  
    return (
      &lt;div&gt;
        {  props.subcategories.map(subcat =&gt; (
              &lt;div&gt;{subcat.subcat_name}&lt;/div&gt;
        ))}
        &lt;FooterCat cat={catData.categories}&gt;&lt;/FooterCat&gt;
      &lt;/div&gt;) 
  }
  </code></pre>
  
  <p>So the categoryPage component should receive correctly the props transmitted through the router, no ?</p>
  
  <p>Instead it throws an error "TypeError: Cannot read property 'map' of undefined" I don't understand...
  Thanks</p>