Are nested CompatRoutes supported?

[savolkov]

Hey, currently we have the following v5 structure:

    <Router history={History}>
      <CompatRouter>
        <Switch>
          <Route path="/framed" key={"framedApp"}>
            <FramedApp>{appRoutes}</FramedApp>
          </Route>
          <CompatRoute path="/" key={"app"} component={() => <App>{appRoutes}</App>} />
        </Switch>
      </CompatRouter>
    </Router>

where appRoutes are the following array (shortened):

export const appRoutes = [
  <Route path="/supportMessages" component={SupportMessages} key={"supportMessages"} />,
  <Route path="/ThemeSettings" component={ThemeSettings} key={"ThemeSettings"} />,
  <Route path="/IndexTableEditor/:objectId" component={IndexTableEditor} key={"IndexTableEditor"} />,
  ...
];

I'm trying to apply the migration package the following way:

    <Router history={History}>
      <CompatRouter>
        <Switch>
          <CompatRoute path="/framed" key={"framedApp"}>
            <FramedApp>{appRoutes}</FramedApp>
          </CompatRoute>
          <CompatRoute path="/" key={"app"}>
            <App>{appRoutes}</App>
          </CompatRoute>
        </Switch>
      </CompatRouter>
    </Router>

having appRoutes as following:

export const appRoutes = [
  <CompatRoute path="/supportMessages" component={SupportMessages} key={"supportMessages"} />,
  <CompatRoute path="/ThemeSettings" component={ThemeSettings} key={"ThemeSettings"} />,
  <CompatRoute path="/IndexTableEditor/:objectId" component={IndexTableEditor} key={"IndexTableEditor"} />,
  ...
];

And it shows just blank screen.
Simplifying whole router to a structure like this:

    <Router history={History}>
      <CompatRouter>
        <Switch>
          <CompatRoute path="/" key={"app"} component={() => <App>{appRoutes}</App>} />
        </Switch>
      </CompatRouter>
    </Router>

also leads to blank screen on the specified route.

So, it seems to me that either the compatibility package does not support nested routes or I'm doing something wrong.

Could you please help me to understand what's going on?

[savolkov]

@ryanflorence

[ryanflorence]

I think I see two problems:

First, your compat route won't match deeply without a splat (Step 5 in the guide). So change them to this:

<Router history={History}>
  <CompatRouter>
    <Switch>
-     <CompatRoute path="/framed">
+     <CompatRoute path="/framed/*">
        <FramedApp>{appRoutes}</FramedApp>
      </CompatRoute>
-     <CompatRoute path="/">
+     <CompatRoute path="*">
        <App>{appRoutes}</App>
      </CompatRoute>
    </Switch>
  </CompatRouter>
</Router>

Second, you've got absolute URLs on the appRoutes that won't match inside of /framed. In fact, I wouldn't expect those to even work in v5 either. Is your code actually like that? I'd expect it to have the parent path concatted onto it.

[savolkov]

Could you please elaborate on your second point? They do work in v5.

Do you mean they should be specified like this (/route => route):

export const appRoutes = [
  <CompatRoute path="supportMessages" component={SupportMessages} key={"supportMessages"} />,
  <CompatRoute path="ThemeSettings" component={ThemeSettings} key={"ThemeSettings"} />,
  <CompatRoute path="IndexTableEditor/:objectId" component={IndexTableEditor} key={"IndexTableEditor"} />,
  ...
];