Вложенный роутинг без составляющей у дочерних элементах?

Question

[Елена]

Мне нужно чтоб в url добавлялся путь дочернего элемента, но постоянного составляющего не было. Чтоб перейдя по ссылке "elena" url был "users/elena" и переходила в компонент Elena(). Можно ли это сделать?

function Users() {
 return (
   <div>
     <Link to="elena"></Link>
     <Link to="oleg"></Link>
   </div>
 );
}

function App() {
 return (
   <Routes>
     <Route path="/users" element={<Users />}>
       <Route path="elena" element={<Elena />} />
       <Route path="oleg" element={<Oleg />} />
     </Route>
   </Routes>
 );
}

Answer 1

[Елена]

Получилось таким образом:

function App() {
 return (
   <Routes>
     <Route path="/users" >
       <Route path="" element={<Users />} />
       <Route path="elena" element={<Elena />} />
       <Route path="oleg" element={<Oleg />} />
     </Route>
   </Routes>
 );
}

Тогда не будет соединятся компонент Users() с дочерними

Comments

[Сергей delphinpro]

Для каждого пользователя будете компонент создавать? =)

[Елена]

Сергей delphinpro, это абстракция) В реальном примере вот так:

function App() {
 return (
   <Routes>
     <Route path="/products" >
       <Route path="" element={<Products />} />
       <Route path="technic" element={<Technic />} />
       <Route path="clothes" element={<Clothes />} />
     </Route>
   </Routes>
 );
}

[Сергей delphinpro]

Елена, те же яйца, только в профиль. Вьюхи категорий товаров так сильно отличаются, что необходимо писать им отдельные компоненты?
Впрочем, вам виднее, наверное.

[Елена]

Сергей delphinpro, увы, но да - отличаются. Мне бы самой проще было сделать один компонент всем и просто менять данные