title: Nextjs dynamic routes - how to pass props from parent to dynamic route child
body: <p>Using next@latest, and their dynamic routing features. I have </p>
  
  <p><code>/pages/index.tsx</code> and <code>/pages/department/[slug]/index.tsx</code>. The first index.tsx is using <code>getStaticProps</code> to pull in a bit of data. During dev this data is an auto-generated array of objects. I am then rendering these objects via props.departments in the index component.</p>
  
  <p>I am showing a list of departments, and want to link an item to a single page:</p>
  
  <pre><code>{departments.map(dept =&gt; (
    &lt;Link
      as={`/department/${dept.slug}`}
      href="/department/[slug]"
    &gt;
      ...
    &lt;/Link&gt;
  )}
  </code></pre>
  
  <p>There seems to be no way to pass down props since there is no obvious parent/child connection.</p>
  
  <p>Do I have to query a single department in the [slug]/index.tsx, should I use react useContext, or is there a better design approach which would take care of the issue? </p>
  
  <p>Thanks for any guidance.</p>