title: Reach Router, render nested route component
body: <p>I am using <a href="https://reach.tech/router/tutorial/06-nesting" rel="nofollow noreferrer">Reach router</a> in the React app (with typescript).</p>
  
  <p>using nested routes I got stuck in how to render the nested component as a separate (in separate view) component and not as the child at the bottom of the parent component.</p>
  
  <p>The code is like:</p>
  
  <pre><code>App.tsx
  --------
  &lt;Router&gt;
    &lt;Customers path="/customers"&gt;
      &lt;PDFExport path=":id" /&gt;
    &lt;/Customers&gt;
    &lt;Users path="/users"&gt;
      &lt;PDFExport path=":id" /&gt;
    &lt;/Users&gt;
  &lt;/Router&gt;
  
  Customers.tsx
  --------------
   interface IProps extends RouteComponentProps {children: any;}
  
  const Customers: React.FC&lt;IProps&gt; = props =&gt; {
   const[customers,setCustomers]=React.useSate(); // somehow fetch custmers
    return (
       &lt;&gt;
         {customers.map(c=&gt;(
             &lt;Button as={Link} to={`${c.id}`} /&gt;)
         }
        // on click the url chages to i.g. `/customers/123`
        // but I do not get navigated to the PDFExport component
        // but I have to render that here as child like follow
         {props.childern}
        // in this case I will have the content of PDFExport component at the bottom of Customers component
      &lt;/&gt;
    );
  }
  
  PDFExport.tsx
  -------------
  interface IProps extends RouteComponentProps {
    id?: string;
  }
  const PDFExport: React.FC&lt;IProps&gt; = props =&gt; {
    return &lt;div&gt;{props.id}&lt;/div&gt;;
    // this will contain the comon form I want to use for different parents
  };
  </code></pre>
  
  <p>The reason why I have used the PDFExport as nesting is that I wan to reuse it for different routes like; <code>/users/:id</code> , <code>/customers/:id</code>.</p>
  
  <p>Is there any way to render the nested route as a separate component not as the child.</p>