title: Include collection of routes from another package in Router
body: <p>Quick question here, I have the below code, and I want to be able to import a whole lot of routes from my package.  The routes that are imported should be controlled by the package I'm building.  If I add a new page in the package (say, ForgotPassword), then I won't want to come here and manually add an entry for ForgotPassword... It should just start working when I update to the latest version of the package.</p>
  <p>Also, what will this route collection look like in my package project?</p>
  <p>Any ideas welcome :D</p>
  <pre><code>...
  import { RouteCollectionFromPackage } from &quot;@my/package&quot;;
  ...
  &lt;Router basename=&quot;/&quot;&gt;
              &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                  &lt;Switch&gt;
                      { /* I WANT TO IMPORT A COLLECTION OF ROUTES FROM MY PACKAGE */}
                      &lt;RouteCollectionFromPackage /&gt;
                      
  
                      { /* THESE ARE IN MY APP */}
                      &lt;Route exact path=&quot;/&quot; component={home} /&gt;
                      &lt;Route exact path=&quot;/search&quot; component={search} /&gt;
      
                  &lt;/Switch&gt;
              &lt;/Suspense&gt;
          &lt;/Router&gt;
  </code></pre>
  <p>Thanks!!</p>
  <h1>EDIT:</h1>
  <p>This is what I have tried, after following some of the suggestions below:</p>
  <p>In my module:</p>
  <pre><code>const Routes = [
      &lt;Route exact path=&quot;/Login&quot; component={Login} /&gt;,
      &lt;Route exact path=&quot;/ForgotPassword&quot; component={Login} /&gt;,
      &lt;Route exact path=&quot;/MyProfile&quot; component={Login} /&gt;
  ];
  
  export { Routes };
  </code></pre>
  <p>In my consuming app:</p>
  <pre><code>import { Suspense, lazy } from &quot;react&quot;;
  import { HashRouter as Router, Switch, Route } from &quot;react-router-dom&quot;;
  import { Routes as PortalFrameworkRoutes, Login} from &quot;@sal/portal&quot;;
  
  const home = lazy(() =&gt; import(&quot;./pages/home/Home&quot;));
  const search = lazy(() =&gt; import(&quot;./pages/search/Search&quot;));
  
  
  function routes() {
      return (
          &lt;Router basename=&quot;/&quot;&gt;
              &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                  &lt;Switch&gt;
                      {PortalFrameworkRoutes.map((route: Route) =&gt; route)}
                      &lt;Route exact path=&quot;/&quot; component={home} /&gt;
                      &lt;Route exact path=&quot;/search&quot; component={search} /&gt;
                  &lt;/Switch&gt;
              &lt;/Suspense&gt;
          &lt;/Router&gt;
      );
  }
  
  export default routes;
  </code></pre>
  <p>I get the error:</p>
  <pre><code>Error: Invariant failed: You should not use &lt;Route&gt; outside a &lt;Router&gt;
  </code></pre>
  <p>OR when I use <code>{...PortalFrameworkRoutes}</code> I get:</p>
  <pre><code>Spread children are not supported in React
  </code></pre>
  <h1>EDIT #2:</h1>
  <p>This may actually be a crucial bit of information I omitted.  In my module, the route is exported, and imported (and again exported) in an <code>index.tsx</code> like this:</p>
  <pre><code>export { Routes } from &quot;./routes&quot;;
  export { Login } from &quot;./pages/login/Login&quot;;
  </code></pre>
  <p>I'm not sure if this is 100% correct, but it feels correct since I just want to do an import from the top level of my module, and have everything available there. i.e. <code>import { Routes as PortalFrameworkRoutes, Login } from &quot;@sal/portal&quot;; </code></p>