Как обойти вложенный массив объектов и вывести объекты как дерево?

Question

[Denis Izmailov]

Есть массив объектов вида:

const array = [
    {
      path: '/searchCars/*',
      element: 'qwe',
      children: [
        {
          path: '/Cars',
          element: 'qwe',
          visible: true
        },
        {
          path: '/Cars/:id',
          element: 'qwe',
          visible: true
        }
      ],
      visible: true
    },
    {
      path: '/about',
      element: 'qwe',
      visible: true
    },
    {
      path: '/contact',
      element: 'qwe',
      visible: true
    }
  ]

Этот массив будет генерить роуты v6 версии.
Знаю что есть хук useRoutes, который как раз и делает это, но как тогда задавать доп параметры типа visible: true что бы был такой роут я не понимаю.
По этому пытаюсь сделать сам такой хук для полного контроля.
Получается где в объектах есть children должен делать вложенность роутов типа:

<Route path="searchCars/*" element={<SearchCars />}>
  <Route path="Cars" element={<Cars />}>
  <Route path="Cars/:id" element={<CarsId />}>
</Route>

Как обойти вложенный массив объектов и вывести объекты как дерево?

Answer 1

[szQocks]

const recursy = (item) => {
   if(item.children){
      return <Route path={item.path} element={item.element}>{item.children.map(recursy)}</Route>;
    }
    
    return <Route path={item.path} element={item.element} />;
  };


array.map(recursy)

С ключами сам разберешься, и убери строки за место компонентов, строки на сколько я знаю в jsx не компоненты

Comments

[Denis Izmailov]

Строки в ключе Element это я просто для вида вписал. Там у меня получается

{
        path: '/',
        Element: Main,
        visible: true
    },

То есть Element получается (property) Element: () => React.JSX.Element функцией.

Ну я попробовал и в консоли вот это: Matched leaf route at location "/" does not have an element or Component. This means it will render an with a null value by default resulting in an "empty" page.

[szQocks]

Denis Izmailov,

{
        path: '/',
        Element: <Main />,
        visible: true
    },

[Denis Izmailov]

szQocks,
Маршруты он прокидывает, а вот вложенные не работают, ошибок нет, а страницы просто белые и без loyout.

{
        path: '/searchCars/*',
        Element: <SearchCars />,
        visible: true,
        children: [
            {
                path: 'Cars/*',
                Element: <'Cars />,
                visible: true,
            },
            {
                        path: 'Cars/:id',
                        Element: <CarsId />,
                        visible: true,
                    },
        ]
    },
    {
        path: '/about',
        Element: <About' />,
        visible: true
    }

const AppRouter = () => {


    const recursy = (item) => {
        if(item.children){
           return <Route path={item.path} element={item.Element}>
            {item.children.map(recursy)}
            </Route>;
         }
         
         return <Route path={item.path} element={item.Element} />;
       };


    return (
        <Routes>

            <Route path={LOYOUT} element={<Loyout />}>
                {privateLoyoutRoutes.map(recursy)}
            </Route>

            <Route path={NOTFOUND} element={<NotFound />} />
        </Routes>
    );
};

export default AppRouter;

[Denis Izmailov]

Осмелюсь предположить что голову делает web pack уже:
Refused to execute script from 'localhost:3001/searchCars/assets/js/main.c0b64170d...' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[szQocks]

Denis Izmailov, <'Cars /> <About' />

[Denis Izmailov]

szQocks, это я исправил и все тоже самое

[szQocks]

Denis Izmailov,

Refused to execute script from 'localhost:3001/searchCars/assets/js/main.c0b64170d...' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

- такая ошибка может вылететь из-за путей, и писать про то что MIME type не совпадает, в общем сиди разбирайся что там не так, что у тебя там в переменные LOYOUT и NOTFOUND я хз

[Denis Izmailov]

szQocks,
LOYOUT = '/'
NOTFOUND = '*'

[szQocks]

Denis Izmailov, а покажи что у тебя в <Loyout />

[Denis Izmailov]

szQocks, уже давно исправил, проверял, все тоже самое

[szQocks]

Denis Izmailov, у тебя внутри <Loyout /> должен Outlet отдавать роуты, но ты похоже этого не делаешь, поэтому и не работает, эта вся чушь к вопросу вообще не имеет отношения, разберешься сам

[Denis Izmailov]

szQocks, отдает, перехожу на путь /searchCars и все нормально работает, перехожу на /searchCars/Cars и белый экран.

Ответ на вопрос получил, отметил как решение.

[szQocks]

Denis Izmailov, щас я через пол часа освобожусь, проверю, что-то прямо не верится что не работает

[szQocks]

Denis Izmailov, проверил, всё работает, значит ты делаешь что-то не то

http://localhost:3000/searchCars
http://localhost:3000/searchCars/Cars
http://localhost:3000/searchCars/Cars/3

например твой компонент SearchCars - так же должен отдавать Outlet если есть вложенные роуты