Как правильно настроить роуты в react router v6?

Question

[deantek]

в 5 версии я делаю вот так, все красиво и компактно

<PrivateRoute path="/managment/:type(add|edit)?/:id?" exact>
    <ManagmentPage />
</PrivateRoute>

в 6 версии "/managment/:type(add|edit)?/:id?" - не работает, я сделал так:

<Route element={<PrivateRoute />}>
      <Route path="managment" element={<ManagmentPage />}>
             <Route path=":add" element={<ManagmentPage />} />
             <Route path=":edit" element={<ManagmentPage />}>
                    <Route path=":id" element={<ManagmentPage />} />
             </Route>
     </Route>
</Route>

так тоже все работает, но я знаю, что можно сделать лучше, но никак не могу найти, подскажите статью или пример

Comments

[Александр]

Возможно суть должна быть такой?

<Route path="managment">
  <Route index element={<ManagmentPage />} />
  <Route path="add" element={<ManagmentPage />} />
  <Route path="edit/:id" element={<ManagmentPage />} />
</Route>

[deantek]

Александр, спасибо, стало лучше, а нельзя как-то также в одну строку прописать, как в v5?

[Александр]

deantek, на сколько я понял - нет.

[deantek]

Александр, ладно, все равно спасибо, напишите ответом, отмечу решенным

[black1277]

В 6-й версии убрали поддержку регулярных выражений, чтобы уменьшить вес библиотеки на треть.

Answer 1

[deantek]

сделал так

<Route path="managment" element={<ManagmentPage />}>
      <Route path="add" />
      <Route path="edit/:id" />
</Route>

Comments

[Kentavr16]

И все это дело обернул в приватный роут?

[deantek]

Kentavr16, да, но как оказалось, это дает много ошибок в консоли, в итоге вернул как было до, только последний роут с id убрал и переписал так path="edit/:id"