title: react-router-dom 6 upgrade help: All component children of <Routes> must be a <Route> or <React.Fragment>
body: <p>Our application recently updated to the beta versions of react-router-dom, and things were fine. Then when I try to update to 6.0.2, I get lots of invariant errors about <code>All component children of &lt;Routes&gt; must be a &lt;Route&gt; or &lt;React.Fragment&gt;</code>. This is because we have our routes defined as follows:</p>
  <p>Feature.jsx:</p>
  <pre><code>export const FeatureRoutes = () =&gt; (
    &lt;Routes&gt;
      &lt;Route path=&quot;/&quot; element={&lt;Feature1 /&gt;} /&gt;
      &lt;Route path=&quot;/*&quot; element={&lt;NotFound /&gt;} /&gt;
    &lt;/Routes&gt;
  );
  </code></pre>
  <p>routes.jsx:</p>
  <pre><code>export const routes = [
    {
      path: &quot;feature&quot;,
      component: FeatureRoutes,
    },
    /* lots of other routes, defined the same way: &lt;Route&gt; wrapped in a component */
  ];
  </code></pre>
  <p>App.jsx:</p>
  <pre><code>&lt;Routes&gt;
    {routes.map((route) =&gt; (
      &lt;Route key={route.path} path={`${pathPrefix}/${route.path}/*`}&gt;
        &lt;route.component /&gt;
      &lt;/Route&gt;
    ))}
  &lt;/Routes&gt;
  </code></pre>
  <p>This now results in the error above, because the inner routes (for example <code>FeatureRoutes</code>) are wrapped in a functional component. I've tried returning the literal JSX but then get another error. I'm not sure how to fix this: is the only answer to completely rewrite how we define our routes? We also have some routes that are stored in the back-end and map to custom components - again I'm not sure how I can wrap these now I'm not allowed to have a component between Routes and Route.</p>
  <p>Any advice appreciated.</p>