Kevin Powell - Community•4mo ago

nested routes in reactjs

I want to display the content of the nested route (e.g., Cake) and hide the parent component’s UI when navigating to /deliver/cake ..here /deliver is parent route Codes I only include main part of code App.js

js 

    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/deliver" element={<Delivery />}>
          <Route path="cake" element={<Cake />} />
        </Route>
      </Routes>
    </Router>
  );

js 

    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/deliver" element={<Delivery />}>
          <Route path="cake" element={<Cake />} />
        </Route>
      </Routes>
    </Router>
  );

Delivery.js

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

function Delivery() {
  return (
    <div>
      <h2>Delivery</h2>
      <nav>
        <Link to="cake">Cake</Link>
      </nav>
      <Outlet />

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

function Delivery() {
  return (
    <div>
      <h2>Delivery</h2>
      <nav>
        <Link to="cake">Cake</Link>
      </nav>
      <Outlet />

Cake.js

function Cake() {
  return <h3>Cake Component</h3>;
}

function Cake() {
  return <h3>Cake Component</h3>;
}

1 Reply

vicOP•4mo ago

Should I try useState and ternary??

Gaming

Programming

nested routes in reactjs