1 reply

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

KP-C

Kevin Powell - Community•2y ago•

1 reply

vic

nested routes in reactjs

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

nested routes in reactjs

Similar Threads

nested routes in reactjs

Similar Threads

Similar Threads

Similar Threads