CODE EXAMPLE FOR JAVASCRIPT

react routing

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

import Shop from './routes/shop/shop';

const App = () => (
  <Router>
      <Routes>
<Route path='/' element={<Navigation />}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path='shop/*' element={<Shop />} />
</Route>
      </Routes>
  </Router>
);

#in navigation.js
const Navigation = () => {
	return (
    <>
      <Whatever />
       
      <Outlet /> #important
    </>
  );
};

#in shop.js
import { Routes, Route } from 'react-router-dom';
const Shop = () => {
  return (
    <Routes>
      <Route index element={<CategoriesPreview />} />
      <Route path=':category' element={<Category />} />
    </Routes>
  );
};

#in category.js
import { useParams } from 'react-router-dom';
const Category = () => {
  const { category } = useParams(); #destructure the param
  ....
}