@dmitry-toster

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

Нужно чтобы по пути /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>
  );
}

Почему данный код не работает? Песочница
  • Вопрос задан
  • 177 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
<Route path="/products" component={Products} />

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

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

Здесь должно быть match.params.slug.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы