Nested Outlet | Remix | Page 1

#

Gonna try to include some code here and maybe it will shed light on the problem

#

Here is my router declaration - Root is where the first Outlet is location and GraphsRoot is where the second Outlet is located.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        element: <GraphsRoot />,
        errorElement: <ErrorPage />,
        children: [
          { index: true, element: <Index /> },
          {
            path: 'graphs',
            element: <div>Hello World</div>,
          }
          // Some more graph route stuff here //101
        ],
      },
    ],
  },
]);

#

Here are the definitions for Root and GraphsRoot

// Root definition:
const Root = () => {
  const navigation = useNavigation();

  return (
    <>
      <HeaderNavigation />
      <Container>
        <div id="detail" className={navigation.state === 'loading' ? 'loading' : ''}>
          <Outlet />
        </div>
      </Container>
    </>
  );
};

// GraphsRoot definition (simplified):
const GraphsRoot = () => {
  const navigation = useNavigation();

  return (
    <Container>
      <Row>
        <Col lg={3} className="align-middle">
          // The sidebar stuff goes here
        </Col>
        <Col id="detail" className={navigation.state === 'loading' ? 'loading' : ''}>
          <Outlet />
        </Col>
      </Row>
    </Container>
  );
};

#

Here is the error I am getting. It goes away when I comment out the line element: <GraphsRoot /> in my route declaration and I go back to getting Hello World without the sidebar (as expected).

#Nested Outlet