Как сделать вложенную маршрутизацию в React?

Question

Есть страница /Products на которой отображаются товары с разных категорий. Необходимо выводить дочерние элементы: /Products/phone - страница телефонов /Products/pc - страница компьютеров и т.д. Как сделать так, что бы /Products стал родительским, а я лишь указывал дочерние роуты? Нужно что то типа того:

<BrowserRouter>
    <Route path='/Products'>
        <Switch>
          <Route path='/phone' render={() => <Phone />} />
          <Route path='/pc' render={() => <Pc />} />
        </Switch>
    </Route>
</BrowserRouter>

P.S. Не предлагайте прописывать путь для каждой категории. Все эти категории будут динамическими и URL зависить будет от названия. + подкатегории будут. Нужно решение именно в духе вложенных роутов

Answer 1

<BrowserRouter>
  <Route exact path='/'>
      <Redirect to='/Products' component = { Product } />
   </Route>
  <Route path='/Products'/>
</BrowserRouter>

В твоем продакт

       <Switch>
          <Route path=`${match.path}/phone`component={<Phone />} />
          <Route path=`${match.path}/pc` component={<Pc />} />
        </Switch>

Только match деструктуризируй

БЛОГ НА HUSL

Как сделать вложенную маршрутизацию в React?

Ответы (1 шт):