Как организовать роутинг?

Question

[Константин]

Нужно сделать так, чтобы была страница, которая являлась бы основой, базой для других вложенных внутрь неё.

ГУГЛ ОТВЕТ НЕ ДАЛ НА МОЙ ВОПРОС.

Я пытаюсь это сделать так:

<Routes>
        <Route path="lists/" element={<PageTwo />}>
               <Route path="lists/catalog" element={<Bread />} />
        </Route>
</Routes>

Но по адресу localhost:3000/lists/catalog у меня пустая страница и нет тех элементов, которые должны подключиться за счет адреса lists(PageTwo) и catalog(Bread).

Как это исправить? Как сделать так, чтобы внутри }> можно было добавлять разные адреса и таким образом организовывать дочерние компоненты по отношению к PageTwo, а PageTwo был бы при этом базой для этих дочерних элементов и не менялся бы?

Answer 1

[Александр]

https://reactrouter.com/en/main/components/outlet

Comments

[Константин]

честно говоря вообще ничего не понял... что делать с этим ? Куда его вставлять, как использовать?

[Александр]

Константин, Изучите пример https://stackblitz.com/github/remix-run/react-rout...

[Константин]

Александр, все было куда проще, нужно было после lists/ поставить символ звездочка *. Все сразу заработало.

[Александр]

Константин, тогда у Вас с отображением большая лажа. Изучить вложенные роуты и что такое отулет. Думаю даже кусры/видео есть по React Router 6.

Answer 2

[Антон Иванов]

У вас ошибка во вложенном роуте

<Routes>
        <Route path="lists/" element={<PageTwo />}>
               <Route path="catalog" element={<Bread />} />
        </Route>
</Routes>