Nested route not displaying component

Ionic Framework Ionic React
1

I’ve been trying to have a common IonToolbar for all of my nested routes, but any routes under the “/” route will just redirect to a blank page.

This is my App.tsx

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/" component={Menu} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Menu.tsx

const Menu: React.FC = () => {
  return (
    <IonPage>
      <IonMenu contentId="content-outlet" side="end">
        <IonToolbar>
          <IonTitle>Menu</IonTitle>
        </IonToolbar>
        <IonContent>
          <IonButton routerLink="/list" />
        </IonContent>
      </IonMenu>
      <IonHeader>
        <IonToolbar>
          <IonTitle>
            <img src={logo}></img>
          </IonTitle>
          <IonButtons slot="end">
            <IonMenuButton />
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonRouterOutlet id="content-outlet">
        <Route path="/list" component={Listing} />
      </IonRouterOutlet>
    </IonPage>
  );
};

List.tsx

const List: React.FC = () => {
  console.log("list");

  return (
    <IonContent>
      <IonGrid>
        <IonRow>
          <IonCol>
            <IonList>
              {_.range(1, 15).map((num, i) => (
                <ListItem
                  customKey={"list" + num}
                  length={num * 10}
                  title={"List#" + num}
                />
              ))}
            </IonList>
          </IonCol>
        </IonRow>
      </IonGrid>
    </IonContent>
  );
};

Changing the “/list” path to just “/” causes both components to render as expected. The List component itself seems to load/render even when nothing is displayed, as I can see the log in the console.