Newbie here. How to Index function "_index.tsx" being used as Home Page? #9643

HeisUser · 2024-06-24T00:37:49Z

HeisUser
Jun 24, 2024

I can't understand How to make Index function at "_index.tsx" being used as Home Page?
and the function Layout() at "root.tsx" how to output the result from argument of "children"?
Also function App() how to being output the result via argument of "children" of Layout() function at "root.tsx"?
Remix Version 2.9.2

I'm still not understand the ideology of Remix Run how to generate the "Home Page" aka. "Index Page" and How to assign custom-name page to as index page. Hope someone provides me some clues to figure out the ideology.

Filename is app/root.tsx as below

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import "./tailwind.css";
import Example from "./routes/example";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>

      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
      
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

Filename is app/routes/_index.tsx as below

import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};


export default function Index() {
  return (
    <div className="font-sans p-4">
      <h1 className="text-3xl">Welcome to Remix</h1>
      <ul className="list-disc mt-4 pl-6 space-y-2">
        <li>
          <a
            className="text-blue-700 underline visited:text-purple-900"
            target="_blank"
            href="https://remix.run/start/quickstart"
            rel="noreferrer"
          >
            5m Quick Start
          </a>
        </li>
        <li>
          <a
            className="text-blue-700 underline visited:text-purple-900"
            target="_blank"
            href="https://remix.run/start/tutorial"
            rel="noreferrer"
          >
            30m Tutorial
          </a>
        </li>
        <li>
          <a
            className="text-blue-700 underline visited:text-purple-900"
            target="_blank"
            href="https://remix.run/docs"
            rel="noreferrer"
          >
            Remix Docs
          </a>
        </li>
      </ul>

    </div>

  );
}

admirsaheta · 2024-06-24T09:34:54Z

admirsaheta
Jun 24, 2024

Imagine your Remix app like a house:

The _index.tsx file is like the front door of your house. When someone visits your website's main address (usually /), Remix checks for this file and uses it to build the entrance (the home page).
The root.tsx file is like the blueprint for the entire house. It defines the basic structure, including the walls, roof, and foundation (think of these as the HTML elements like <html>, <head>, and <body>).
Inside root.tsx, there's a special spot called the children area. This acts like a blank space in the middle of the house where you can put furniture (your actual content).
The App.tsx file is pretty simple. It just says, "Hey, build the house according to the blueprint (from root.tsx), and leave the space in the middle empty for now."
Now, when you create a component like Index.tsx (from app/routes/_index.tsx), it's like building a nice couch or table to put in that empty space (children) in the house.
When someone visits the home page, Remix takes the couch/table (the content from Index.tsx) and places it in the empty space within the house layout (defined by root.tsx). This way, the user sees your home page content nicely displayed.

So, Remix uses conventions to automatically connect your _index.tsx (the front door) with the root.tsx layout (the house structure) and lets you fill in the furniture (content) with components like Index.tsx.

3 replies

HeisUser Jun 25, 2024
Author

With your explanatory, I can't find out where the _index.tsx & App.tsx being imported to be used as component at root.tsx.

Can I change default _index.tsx (or root.tsx) with custom name?

sergiodxa Jun 25, 2024
Maintainer

The default export component name doesn't matter, route files does matter as they follow a convention.

This convention is what allows Remix's compiler to know what routes to configure in your app and how to load them, so you don't have to.

HeisUser Jun 27, 2024
Author

Can you show me some example with screenshot ?
Appreciated with your helping.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Newbie here. How to Index function "_index.tsx" being used as Home Page? #9643

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Newbie here. How to Index function "_index.tsx" being used as Home Page? #9643

Uh oh!

Uh oh!

HeisUser Jun 24, 2024

Replies: 1 comment · 3 replies

Uh oh!

admirsaheta Jun 24, 2024

Uh oh!

HeisUser Jun 25, 2024 Author

Uh oh!

sergiodxa Jun 25, 2024 Maintainer

Uh oh!

HeisUser Jun 27, 2024 Author

HeisUser
Jun 24, 2024

Replies: 1 comment 3 replies

admirsaheta
Jun 24, 2024

HeisUser Jun 25, 2024
Author

sergiodxa Jun 25, 2024
Maintainer

HeisUser Jun 27, 2024
Author