Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
1 reply
vic

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>
  );

Delivery.js
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>;
}
Was this page helpful?