Why nested routes don't work in react-router-dom?

Question

React

It is necessary that the /productscomponent opens along the way Products. It works.
But /products/123it should display the component Product, which would have available in props what comes after products, i.e. 123. This does not work.

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <BrowserRouter>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
          <li>
            <Link to="/products/1">Product 1</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/products" component={Products} />
          <Route path="/products/:slug" component={Product} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

Why is this code not working? Sandbox

Answer 1

<Route path="/products" component={Products} />

Add here exact.

return <h1>Product# {match.slug}</h1>;

It should be here match.params.slug.