Routing with React Router

npm install react-router-dom

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

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

function Home() {
  return (
    <section>
      <h1>Brew & Bean</h1>
      <p>Fresh coffee in Indiranagar, Bengaluru. Open 8 am to 10 pm. Pickup only.</p>
      <Link to="/menu">See the menu</Link>
    </section>
  );
}

export default Home;

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

function Menu() {
  const [menu, setMenu] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/menu.json')
      .then((response) => response.json())
      .then((data) => setMenu(data))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading menu...</p>;

  return (
    <section>
      <h1>Menu</h1>
      <ul>
        {menu.map((item) => (
          <li key={item.id}>
            <Link to={'/menu/' + item.id}>{item.name}</Link> - ₹{item.price}
          </li>
        ))}
      </ul>
    </section>
  );
}

export default Menu;

import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom';

function ItemPage() {
  const { itemId } = useParams();
  const [menu, setMenu] = useState(null);

  useEffect(() => {
    fetch('/menu.json')
      .then((response) => response.json())
      .then((data) => setMenu(data));
  }, []);

  if (menu === null) return <p>Loading...</p>;

  const item = menu.find((m) => m.id === itemId);
  if (!item) {
    return (
      <section>
        <h1>We could not find that item</h1>
        <Link to="/menu">Back to the menu</Link>
      </section>
    );
  }

  return (
    <section>
      <h1>{item.name}</h1>
      <p>Category: {item.category}</p>
      <p>Price: ₹{item.price}</p>
      <Link to="/menu">Back to the menu</Link>
    </section>
  );
}

export default ItemPage;

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

function navStyle({ isActive }) {
  return { fontWeight: isActive ? 'bold' : 'normal', marginRight: '1rem' };
}

function Layout() {
  return (
    <>
      <header>
        <nav>
          <NavLink to="/" end style={navStyle}>Home</NavLink>
          <NavLink to="/menu" style={navStyle}>Menu</NavLink>
          <NavLink to="/order" style={navStyle}>Order</NavLink>
        </nav>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>Brew & Bean, Indiranagar, Bengaluru</footer>
    </>
  );
}

export default Layout;

import { Navigate, Route, Routes } from 'react-router-dom';
import Layout from './Layout';
import Home from './pages/Home';
import Menu from './pages/Menu';
import ItemPage from './pages/ItemPage';
import OrderPage from './pages/OrderPage';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="menu" element={<Menu />} />
        <Route path="menu/:itemId" element={<ItemPage />} />
        <Route path="order" element={<OrderPage />} />
        <Route path="coffee" element={<Navigate to="/menu" replace />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

export default App;

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

function NotFound() {
  return (
    <section>
      <h1>Page not found</h1>
      <p>That address does not exist.</p>
      <Link to="/">Go to the home page</Link>
    </section>
  );
}

export default NotFound;

import { useNavigate } from 'react-router-dom';

function OrderPage() {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    // In a real app: POST /orders first, then use the id it returns.
    const newOrderId = 'demo-123';
    navigate('/menu', { replace: true, state: { justOrdered: newOrderId } });
  }

  return (
    <section>
      <h1>Place an order</h1>
      <form onSubmit={handleSubmit}>
        <button type="submit">Place demo order</button>
      </form>
    </section>
  );
}

export default OrderPage;

import { useSearchParams } from 'react-router-dom';

// inside Menu():
const [searchParams, setSearchParams] = useSearchParams();
const category = searchParams.get('category') || 'all';

const visible =
  category === 'all' ? menu : menu.filter((item) => item.category === category);

// a button that changes the URL to /menu?category=tea
// <button onClick={() => setSearchParams({ category: 'tea' })}>Tea</button>

I am building a React app with React Router (declarative mode, plain JavaScript). The app is: [describe your app and its pages].

List the routes (path and component name), say which should share a layout, which need URL parameters or query strings, and what the 404 behaviour should be. Then write the Routes block for App.jsx. Do not add features I did not ask for.