Почему не работают вложенные роуты в react-router-dom?

Question

[dmitry-toster]

Нужно чтобы по пути /products открывался компонент Products. Это работает.
Но /products/123 должен отображать компонент Product, у которого в пропсах было бы доступно то, что идет после products, т.е 123. Это не работает.

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

Почему данный код не работает? Песочница

Answer 1

[0xD34F]

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

Сюда добавить exact.

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

Здесь должно быть match.params.slug.

Comments

[dmitry-toster]

Большое спасибо!