title: React Router - routes not working using a Fragment
body: <p>Relatively new to react and javascript, but was trying to organize a project with some routes being pulled from a different constant so I could use them in another file so that someone could develop and test on a separate module without needing the full application (pseudo micro frontends type stuff). this is likely over-engineering, but basically, when I put my routes in a const and reference them from somewhere else, any route below my const references just loads a blank page instead of the components or html.</p>
  <p>Any guidance would be appreciated.</p>
  <p>(react 17.0.2 and react-router-dom 5.1.2)</p>
  <p>routes.js):</p>
  <pre><code>import { BrowserRouter, Route, Switch, Redirect } from &quot;react-router-dom&quot;;
  import * as Yup from 'yup';
  import Location from 'app-location';
  import * as profile from '@profile-views';
  import * as view from &quot;modules/app/views&quot;;
  ...
  
  const PROFILE_ROOT = `/profile`;
  
  const userId = Yup.string();
  
  /* Profile Routes */
  export const Profile = new Location(
      `${PROFILE_ROOT}/:userId`, 
      { 
        userId: userId.required()
      }
    );
  export const ProfileContactInfo = new Location(
    `${Profile.path}/contact`, 
    { userId: userId.required()}, 
  );
  export const ProfileCalendar = new Location(
    `${Profile.path}/calendar`, 
    { userId: userId.required()}, 
  );
  ...
  export const renderRoutes = (
    &lt;&gt;
        {/* everything works if Route components are in Routes() */}
      &lt;Route exact path={Profile.path} component={profile.Timeline}/&gt;
      &lt;Route path={ProfileCalendar.path} component={profile.Calendar}/&gt;
      &lt;Route path={ProfileContactInfo.path} component={profile.ContactInfo}/&gt;
    &lt;/&gt;
  )
  
  export default function Routes() {
    return (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/login&quot; component={view.Login} /&gt;
          { renderRoutes }
          {/* EVERYTHING ABOVE WORKS */}
          {/* EVERYTHING BELOW renderRoutes DOES NOT WORK */}
          {/* everything below works if i remove renderRoutes */}
          {/* everything works if i copy Routes from renderRoutes here */}
          &lt;Route path=&quot;/create-user&quot; component={view.CreateUser} /&gt;
          &lt;Route path=&quot;/404&quot; component={() =&gt; &lt;h1&gt;Not Found!&lt;/h1&gt;} /&gt;
          &lt;Redirect to=&quot;/404&quot; /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  </code></pre>
  <p>App.js:</p>
  <pre><code>import Routes from &quot;./routes&quot;;
  ...
  function App() {
      return (
          &lt;UserProvider&gt;
              &lt;Routes /&gt;
          &lt;/UserProvider&gt;
      );
  }
  </code></pre>