앱을 처음 실행하면 오른쪽에 큰 공백 페이지가 나타난다.

route에 자식 route가 있는 경우, 부모 route를 렌더링하면 <Outlet> 에 일치하는 항목이 없으므로 공백으로 표시된다.

index routes는 해당 공간을 채우는 기본 자식 route로 간주할 수 있다.

Create the index route module

touch src/routes/index.jsx

Fill in the index component's elements

// 📄src/routes/index.jsx

export default function Index() {
  return (
    <p id="zero-state">
      This is a demo for React Router.
      <br />
      Check out{" "}
      <a href="https://reactrouter.com">
        the docs at reactrouter.com
      </a>
      .
    </p>
  );
}

Configure the index route

// 📄src/main.jsx

// existing code
import Index from "./routes/index";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      { index: true, element: <Index /> },
      /* existing routes */
    ],
  },
]);

{path: ""} 대신에 {index:true} 를 쓴다는 것에 주의하자.

출처 : 리액트 라우터 공식 홈페이지➡️