Unable to render more than one CompatRoute

[xavier-lc]

Hello, I'm on step 1 of the migration (Render CompatRoute elements inside of Switch), and my app has the following structure:

<Router history={history}>
  <CompatRouter>
    <Switch location={baseLocation}>
      <CompatRoute path="/" component={Home} />
      ...
    </Switch>
    <Switch location={modalLocation}>
      <CompatRoute path="/newpost" component={NewPostModal} />
      ...
    </Switch>
  </CompatRouter>
</Router>

We render Route elements under different Switch elements which keep track of their own location. The idea behind this is that when a modal path is used, the baseLocation stays with the previous one, and the element rendered with it is visible underneath the modal, which is shown in an overlay.

I'm now having trouble because, after replacing Route with CompatRoute and reaching a modal path, only the modal element is rendered, even though the Switch that keeps track of the baseLocation has the correct location value and should render the Home element.

So, I'm thinking that it might be that the new Router component prevents rendering multiple CompatRoute at the same time. Is this the case? Any idea on how could I handle my issue?

Thanks

Update:

I've published an example with the code: https://github.com/xavier-lc/my-app

If you clone it, go to the example-working branch, and run npm i && npm start you can see an example of the App:

On the example-with-compat-route-not-working branch, where the routes are CompatRoute, only one of them gets rendered:

Update 2:

Got it working on a new branch using directly the v6 packages, so I guess I'll have to avoid some steps of the mgiration guide :/

[xavier-lc]

I've managed to get it working with this patch:

diff --git a/index.js b/index.js
index ee2ef576db90bc4e425f62f3765144913fbb9921..43e87a2a5bbdd68a9a3988a25de9952c85eff97c 100644
--- a/index.js
+++ b/index.js
@@ -371,10 +371,10 @@ function createSearchParams(init) {
 
 function CompatRoute(props) {
   let {
-    path
+    location, path
   } = props;
   if (!props.exact) path += "/*";
-  return /*#__PURE__*/createElement(Routes, null, /*#__PURE__*/createElement(Route, {
+  return /*#__PURE__*/createElement(Routes, location ? { location } : null, /*#__PURE__*/createElement(Route, {
     path: path,
     element: /*#__PURE__*/createElement(Route$1, props)
   }));
diff --git a/umd/react-router-dom-v5-compat.development.js b/umd/react-router-dom-v5-compat.development.js
index 84cc8a2593ded1483065bc7e165f3b95017500b2..e20abe81819361dd5a53f498f11f13130c6533c8 100644
--- a/umd/react-router-dom-v5-compat.development.js
+++ b/umd/react-router-dom-v5-compat.development.js
@@ -371,10 +371,10 @@
 
   function CompatRoute(props) {
     let {
-      path
+      location, path
     } = props;
     if (!props.exact) path += "/*";
-    return /*#__PURE__*/React.createElement(reactRouter.Routes, null, /*#__PURE__*/React.createElement(reactRouter.Route, {
+    return /*#__PURE__*/React.createElement(reactRouter.Routes, location ? { location } : null, /*#__PURE__*/React.createElement(reactRouter.Route, {
       path: path,
       element: /*#__PURE__*/React.createElement(reactRouterDom.Route, props)
     }));
diff --git a/umd/react-router-dom-v5-compat.production.min.js b/umd/react-router-dom-v5-compat.production.min.js
index 355461fd1a58f91505c695bbd3f66dc08dde3a6f..dca68137cbbac607df1ae8155d339fd664074726 100644
--- a/umd/react-router-dom-v5-compat.production.min.js
+++ b/umd/react-router-dom-v5-compat.production.min.js
@@ -8,5 +8,5 @@
  *
  * @license MIT
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("history"),require("react-router"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","history","react-router","react-router-dom"],t):t((e=e||self).ReactRouterDOMv5Compat={},e.React,e.HistoryLibrary,e.ReactRouter,e.ReactRouterDOM)}(this,(function(e,t,r,n,a){"use strict";function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function u(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}const i=["onClick","reloadDocument","replace","state","target","to"],c=["aria-current","caseSensitive","className","end","style","to","children"];const s=t.forwardRef((function(e,r){let{onClick:a,reloadDocument:c,replace:s=!1,state:l,target:h,to:p}=e,y=u(e,i),m=n.useHref(p),b=f(p,{replace:s,state:l,target:h});return t.createElement("a",o({},y,{href:m,onClick:function(e){a&&a(e),e.defaultPrevented||c||b(e)},ref:r,target:h}))})),l=t.forwardRef((function(e,r){let{"aria-current":a="page",caseSensitive:i=!1,className:l="",end:f=!1,style:h,to:p,children:y}=e,m=u(e,c),b=n.useLocation(),d=n.useResolvedPath(p),g=b.pathname,v=d.pathname;i||(g=g.toLowerCase(),v=v.toLowerCase());let P,R=g===v||!f&&g.startsWith(v)&&"/"===g.charAt(v.length),O=R?a:void 0;P="function"==typeof l?l({isActive:R}):[l,R?"active":null].filter(Boolean).join(" ");let w="function"==typeof h?h({isActive:R}):h;return t.createElement(s,o({},m,{"aria-current":O,className:P,ref:r,style:w,to:p}),"function"==typeof y?y({isActive:R}):y)}));function f(e,r){let{target:a,replace:o,state:u}=void 0===r?{}:r,i=n.useNavigate(),c=n.useLocation(),s=n.useResolvedPath(e);return t.useCallback((t=>{if(!(0!==t.button||a&&"_self"!==a||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(t))){t.preventDefault();let r=!!o||n.createPath(c)===n.createPath(s);i(e,{replace:r,state:u})}}),[c,i,s,o,u,a,e])}function h(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createBrowserHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{path:r}=e;return e.exact||(r+="/*"),t.createElement(n.Routes,null,t.createElement(n.Route,{path:r,element:t.createElement(a.Route,e)}))},e.CompatRouter=function(e){let{children:r}=e,o=a.useHistory(),[u,i]=t.useState((()=>({location:o.location,action:o.action})));return t.useLayoutEffect((()=>{o.listen(((e,t)=>i({location:e,action:t})))}),[o]),t.createElement(n.Router,{navigationType:u.action,location:u.location,navigator:o},t.createElement(n.Routes,null,t.createElement(n.Route,{path:"*",element:r})))},e.HashRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createHashHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Link=s,e.NavLink=l,e.StaticRouter=function(e){let{basename:a,children:o,location:u="/"}=e;"string"==typeof u&&(u=r.parsePath(u));let i=r.Action.Pop,c={pathname:u.pathname||"/",search:u.search||"",hash:u.hash||"",state:u.state||null,key:u.key||"default"},s={createHref:e=>"string"==typeof e?e:r.createPath(e),push(e){throw new Error("You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+")` somewhere in your app.")},replace(e){throw new Error("You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+", { replace: true })` somewhere in your app.")},go(e){throw new Error("You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+e+")` somewhere in your app.")},back(){throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.")},forward(){throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.")}};return t.createElement(n.Router,{basename:a,children:o,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=h,e.unstable_HistoryRouter=function(e){let{basename:r,children:a,history:o}=e;const[u,i]=t.useState({action:o.action,location:o.location});return t.useLayoutEffect((()=>o.listen(i)),[o]),t.createElement(n.Router,{basename:r,children:a,location:u.location,navigationType:u.action,navigator:o})},e.useLinkClickHandler=f,e.useSearchParams=function(e){let r=t.useRef(h(e)),a=n.useLocation(),o=t.useMemo((()=>{let e=h(a.search);for(let t of r.current.keys())e.has(t)||r.current.getAll(t).forEach((r=>{e.append(t,r)}));return e}),[a.search]),u=n.useNavigate();return[o,t.useCallback(((e,t)=>{u("?"+h(e),t)}),[u])]},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("history"),require("react-router"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","history","react-router","react-router-dom"],t):t((e=e||self).ReactRouterDOMv5Compat={},e.React,e.HistoryLibrary,e.ReactRouter,e.ReactRouterDOM)}(this,function(e,t,r,n,o){"use strict";function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}const i=["onClick","reloadDocument","replace","state","target","to"],c=["aria-current","caseSensitive","className","end","style","to","children"];function s(e){let{basename:r,children:o,history:a}=e;const[u,i]=t.useState({action:a.action,location:a.location});return t.useLayoutEffect(()=>a.listen(i),[a]),t.createElement(n.Router,{basename:r,children:o,location:u.location,navigationType:u.action,navigator:a})}s.displayName="unstable_HistoryRouter";const l=t.forwardRef(function(e,r){let{onClick:o,reloadDocument:c,replace:s=!1,state:l,target:f,to:p}=e,y=u(e,i),d=n.useHref(p),m=h(p,{replace:s,state:l,target:f});return t.createElement("a",a({},y,{href:d,onClick:function(e){o&&o(e),e.defaultPrevented||c||m(e)},ref:r,target:f}))});l.displayName="Link";const f=t.forwardRef(function(e,r){let{"aria-current":o="page",caseSensitive:i=!1,className:s="",end:f=!1,style:h,to:p,children:y}=e,d=u(e,c),m=n.useLocation(),b=n.useResolvedPath(p),g=m.pathname,v=b.pathname;i||(g=g.toLowerCase(),v=v.toLowerCase());let P,R=g===v||!f&&g.startsWith(v)&&"/"===g.charAt(v.length),w=R?o:void 0;P="function"==typeof s?s({isActive:R}):[s,R?"active":null].filter(Boolean).join(" ");let O="function"==typeof h?h({isActive:R}):h;return t.createElement(l,a({},d,{"aria-current":w,className:P,ref:r,style:O,to:p}),"function"==typeof y?y({isActive:R}):y)});function h(e,r){let{target:o,replace:a,state:u}=void 0===r?{}:r,i=n.useNavigate(),c=n.useLocation(),s=n.useResolvedPath(e);return t.useCallback(t=>{if(!(0!==t.button||o&&"_self"!==o||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(t))){t.preventDefault();let r=!!a||n.createPath(c)===n.createPath(s);i(e,{replace:r,state:u})}},[c,i,s,a,u,o,e])}function p(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map(e=>[r,e]):[[r,n]])},[]))}f.displayName="NavLink",Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:o,children:a,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createBrowserHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect(()=>c.listen(l),[c]),t.createElement(n.Router,{basename:o,children:a,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{location:r,path:a}=e;return e.exact||(a+="/*"),t.createElement(n.Routes,r?{location:r}:null,t.createElement(n.Route,{path:a,element:t.createElement(o.Route,e)}))},e.CompatRouter=function(e){let{children:r}=e,a=o.useHistory(),[u,i]=t.useState(()=>({location:a.location,action:a.action}));return t.useLayoutEffect(()=>{a.listen((e,t)=>i({location:e,action:t}))},[a]),t.createElement(n.Router,{navigationType:u.action,location:u.location,navigator:a},t.createElement(n.Routes,null,t.createElement(n.Route,{path:"*",element:r})))},e.HashRouter=function(e){let{basename:o,children:a,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createHashHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect(()=>c.listen(l),[c]),t.createElement(n.Router,{basename:o,children:a,location:s.location,navigationType:s.action,navigator:c})},e.Link=l,e.NavLink=f,e.StaticRouter=function(e){let{basename:o,children:a,location:u="/"}=e;"string"==typeof u&&(u=r.parsePath(u));let i=r.Action.Pop,c={pathname:u.pathname||"/",search:u.search||"",hash:u.hash||"",state:u.state||null,key:u.key||"default"},s={createHref:e=>"string"==typeof e?e:r.createPath(e),push(e){throw new Error("You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+")` somewhere in your app.")},replace(e){throw new Error("You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+", { replace: true })` somewhere in your app.")},go(e){throw new Error("You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+e+")` somewhere in your app.")},back(){throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.")},forward(){throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.")}};return t.createElement(n.Router,{basename:o,children:a,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=p,e.unstable_HistoryRouter=s,e.useLinkClickHandler=h,e.useSearchParams=function(e){!function(e,t){if(!e){"undefined"!=typeof console&&console.warn(t);try{throw new Error(t)}catch(e){}}}("undefined"!=typeof URLSearchParams,"You cannot use the `useSearchParams` hook in a browser that does not support the URLSearchParams API. If you need to support Internet Explorer 11, we recommend you load a polyfill such as https://github.com/ungap/url-search-params\n\nIf you're unsure how to load polyfills, we recommend you check out https://polyfill.io/v3/ which provides some recommendations about how to load polyfills only for users that need them, instead of for every user.");let r=t.useRef(p(e)),o=n.useLocation(),a=t.useMemo(()=>{let e=p(o.search);for(let t of r.current.keys())e.has(t)||r.current.getAll(t).forEach(r=>{e.append(t,r)});return e},[o.search]),u=n.useNavigate();return[a,t.useCallback((e,t)=>{u("?"+p(e),t)},[u])]},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=react-router-dom-v5-compat.production.min.js.map

And then providing the location prop to the CompatRoute.