[SOLVED] My nested route in remix is not working properly

My nested route in remix is not working properly

I was trying the remix jokes app but for some reason when I go to /jokes the outlet is not doing its job properly. Here is the code app/routes/jokes.tsx =

import { Outlet } from "@remix-run/react";
export default function JokesRoute() {
  return (
    <div>
      <h1>J🤪KES</h1>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

and the app/route/jokes/_index.tsx =

export default function JokesIndexRoute() {
  return (
    <div>
      <p>Here's a random joke:</p>
      <p>
        I was wondering why the frisbee was getting bigger,
        then it hit me.
      </p>
    </div>
  );
}

I tried looking for typos but everything is correct

Solution

You need to "update the app/root.tsx to position children. You'll do this with the component from @remix-run/react" as it shows in the documentation (https://remix.run/docs/en/main/tutorials/jokes#routes/):

import { LiveReload, Outlet } from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <title>Remix: So great, it's funny!</title>
      </head>
      <body>
        <Outlet />
        <LiveReload />
      </body>
    </html>
  );
}