title: React Router v6 not working with URL Slugs
body: <p>I'm trying to make react-router-dom work with a simple url: /user/{name} but for some reason cannot get it to load the page with the url slug for the name.</p>
  <p>This is the return of my App function component:</p>
  <pre><code>    &lt;&gt;
        &lt;MainNavBar navigation={navigation} /&gt;
        &lt;Routes&gt;
          &lt;Route index={true} element={&lt;Home /&gt;} exact /&gt;
          &lt;Route path=&quot;user&quot; element={&lt;User /&gt;} exact&gt;
            &lt;Route
              path=&quot;:name&quot;
              render={
                ({ match: { params: { name } } }) =&gt; {
                  console.log(name);
                  console.log(&quot;test2&quot;);
                  return (&lt;UserPage
                    userName={name}
                  /&gt;);
                }}
            /&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;*&quot; element={&lt;PageNotFound /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/&gt;
  </code></pre>
  <p>This is the User component; a placeholder for my debugging atm.</p>
  <pre><code>const User = () =&gt; (
    &lt;div&gt;
      &lt;header className=&quot;App-header&quot;&gt;
        &lt;Outlet /&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>When I go to http://localhost:3000/user/test it loads the <code>User</code> component but not the children (the Outlet/UserPage elements)</p>
  <p>I've tried lots of combinations but seem to be doing something wrong, so any help would be very appreciated. Thanks!</p>