Screen goes blank when I click on the link. | Remix | Page 1

The obvious issue is that I don't have an <Outlet /> in the parent, except I think I do.

My use case is very similar to the Invoices example in the tutorial, so I'm generally following that.

App.tsx

export const App = () => (
  <ChakraProvider theme={theme}>
    <div>
      <NavBar />
      <Outlet />
    </div>
  </ChakraProvider>
)

So a difference here is the I have a separate component for the app's menu while the tutorial has that in the App.tsx

NavBar provides the menu including a link to Holdings.tsx. The snippet shows how I'm using Link

          {holdings.map((holding) => (
            <Link
              to={`/holdings/${holding.securitySymbol}`}
              key={holding.securitySymbol}
            >
              <HoldingEntry
                key={holding.securitySymbol}
                holding={holding}
              />
            </Link>
          ))}

The main diff between my code and the tutorial is that I'm using another child component HoldingEntry to render each line.

What is the actual parent in which I should place the <Outlet />?

Whoops. I found one bug. I didn't have a : before the holdingId in the route. I'm fixing that now.

#Screen goes blank when I click on the link.