Using Outlet for Component Rendering

Provide an example of how to use the <Outlet /> component for rendering nested route components at their designated outlets.

import { Outlet, Route, Routes } from 'react-router-dom';

Import Outlet, Route, and Routes components from react-router-dom library.

function ParentComponent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <Outlet />
    </div>
  );
}

Defines a ParentComponent that renders an Outlet where nested routes will be displayed.

function ChildComponent() {
  return <h2>Child Component</h2>;
}

Defines a ChildComponent which is intended to be rendered inside the ParentComponent's Outlet.

function App() {
  return (
    <Routes>
      <Route path="/parent" element={<ParentComponent />}>
        <Route path="child" element={<ChildComponent />} />
      </Route>
    </Routes>
  );
}

App component uses Routes to define a nested routing structure. '/parent' route renders the ParentComponent and '/parent/child' route renders the ChildComponent within the ParentComponent's Outlet.