title: react-router v6 wrapped route component not working
body: <p>How can you render a composed <code>Route</code> component</p>
  <p><a href="https://stackblitz.com/edit/react-router-v6-sample-m51eqb?file=index.js" rel="nofollow noreferrer">code example</a></p>
  <p>Bottomline from above example is that in the following code, the <code>Wrapped</code> route will never render it's element</p>
  <pre><code>const App = () =&gt; (
        &lt;Routes&gt;
          &lt;Wrapped/&gt;
          &lt;Route path=&quot;/inline&quot; element={&lt;span &gt;Inline works&lt;/span&gt;} /&gt;
        &lt;/Routes&gt;
  );
  
  const Wrapped = () =&gt; &lt;Route path=&quot;/wrapped&quot; element={&lt;span&gt;wrapped&lt;/span&gt;} /&gt;
  </code></pre>
  <p>Is there a way of doing this kind of composition with the <code>Route</code> component with react-router v6? Or will react-router v6 only support <code>Route</code> directly nested in the <code>Routes</code> component?</p>
  <p>Edit, more specifically I'm trying to get a recommendation for using a <code>ProtectedRoute</code> component, something among the lines of:</p>
  <pre><code>type Props  = {
    element: ReactElement;
    redirectRoute: string;
  } &amp; RouteProps;
  
  const ProtectedRoute = ({element, redirectRoute, ...rest}: Props) =&gt; {
    const {isAuthenticated} = useAuth();
    &lt;Route {...rest} element={isAuthenticated() ? element : &lt;Navigate to={redirectRoute}/&gt;}/&gt;
  }
  
  </code></pre>
  <p>EDIT:
  It seems like this used to work in older beta versions, so this might be a bug. At the moment the latest version is 6.0.0-beta.4 &amp;
  I've logged an issue:
  <a href="https://github.com/remix-run/react-router/issues/8066" rel="nofollow noreferrer">https://github.com/remix-run/react-router/issues/8066</a></p>