How would I implement the Outlet tag in React alongside my root path?

December 5, 2022

For example, I have this code where I want the root path to be the DemoApp component:

import { Routes, Route } from "react-router-dom";
import SignInForm from "./components/SignIn/SignInForm";
import ForgotPassword from "./components/ForgotPassword/ForgotPassword";
import SignUpForm from "./components/SignUp/SignUpForm";
import DemoSignIn from "./components/DemoSignIn/DemoSignIn";
import DemoApp from "./components/DemoSignIn/DemoApp/DemoApp";
import DemoDashboard from "./components/DemoSignIn/DemoDashboard/DemoDashboard";
import "./App.css";

export default function App(props) {
  return (
    <div className="App">
      <Routes>
        <Route path="/sign-in" element={<SignInForm />} />
        <Route path="/forgot-password" element={<ForgotPassword />} />
        <Route path="/sign-up" element={<SignUpForm />} />
        <Route path="/demo-sign-in" element={<DemoSignIn />} />
        <Route path="/demo-dashboard" element={<DemoDashboard />} />
        <Route path="/" element={<DemoApp />}>
          <Route path="demo-dashboard" index element={<DemoDashboard />} />
        </Route>
      </Routes>
    </div>
  );
}

but I also want to have the DemoDashboard component rendered via the Outlet tag in the root path inside my DemoApp component. This is my DemoApp component

import React from "react";
import { Outlet } from "react-router-dom";
import styles from "./DemoApp.module.css";
import HeadNavBar from "../DemoDashboard/HeadNavBar";
import SideNavBar from "../DemoDashboard/SideNavBar";
import DemoDashboard from "../DemoDashboard/DemoDashboard";

const DemoApp = (props) => {
  return (
    <div className={styles["demo-app"]}>
      <div className={styles["head-nav"]}>
        <HeadNavBar />
      </div>
      <div className={styles["side-nav"]}>
        <SideNavBar />
      </div>
      <main className={styles["main-content"]}>
        <Outlet />
      </main>
    </div>
  );
};

export default DemoApp;

Right now when I start up the server it renders the DemoApp component on the root path but not the DemoDashboard component inside of it.

>Solution :

You can’t really specify a path prop and the index prop at the same time on the same Route component, it’s rather one or the other. If you want the DemoDashboard component to also render when the path is "/" then you’ll need an additional index route that renders it.

Example:

export default function App(props) {
  return (
    <div className="App">
      <Routes>
        <Route path="/sign-in" element={<SignInForm />} />
        <Route path="/forgot-password" element={<ForgotPassword />} />
        <Route path="/sign-up" element={<SignUpForm />} />
        <Route path="/demo-sign-in" element={<DemoSignIn />} />
        <Route path="/demo-dashboard" element={<DemoDashboard />} />
        <Route path="/" element={<DemoApp />}>
          <Route
            index                 // <-- rendered on "/"
            element={<DemoDashboard />}
          />
          <Route
            path="demo-dashboard" // <-- rendered on "/demo-dashboard"
            element={<DemoDashboard />}
          />
        </Route>
      </Routes>
    </div>
  );
}