Как в react-router установить дефолтное отображение Outlet?

Question

[magnolia_s]

здравствуйте!
Есть следующий роутер :

const router = createBrowserRouter([
    {
        path: '/',
        element:<MainLayout/>,
        children: [
            {
                path: "user",
                element: <p>user page</p>,
            },
            {
                path: "dashboard",
                element: <DashboardLayout/>,
            },
            {
                path: "reference",
                element: <p>reference page</p>,
            },
            {
                path: "convercation",
                element: <ConversationLayout/>,
            },
            {
                path: "reports",
                element: <ReportsLayout/>,
            },
            {
                path: "systemsettings",
                element: <SystemSettingsLayout/>,
            },
            {
                path: "settings",
                element: <SettingsLayout/>,
                children: [
                    {
                        path: "groups",
                        element: <GroupsLayout/>,
                    },
                    {
                        path: "calls",
                        element: <p>groups</p>,
                    }
                ]
            },

        ],
    },
    {
        path: 'auth',
        element : <LoginLayout/>
    },
    {
        path: "useradd",
        element: <UserAdd/>,
    },
])

мне необходимо по пути локалхост/ по дефолту в аутлете отрисовывать один из компонентов в children, например , /dashboard

в предыдущих версиях роутера был параметр index , но как сделать это в новой версии, я не нашла

Возможно кто-то сталкивался и может подсказать?

Answer 1

[szQocks]

попробуй

{
                index: true,
                element: <DashboardLayout/>,
            }

там в доке типы у роутов описаны, то есть какие параметры принимает и даже есть пример, где показаны 2 возможности создания роутов, и они полностью на выходе одинаковые, и в низу описаны типы и там есть параметр index, и если его можно указать как в компоненте, значит в и массиве его тоже указать можно ,в объекте

Comments

[magnolia_s]

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

{
                index: true,
                element: <DashboardLayout/>,
            }

для индекс -элемента требуется параметр index: true, но не нужен path

[szQocks]

magnolia_s, исправил, ну это на самом деле косяк у самих разрабов роута

вообще как в моём представлении сложилось на счёт типов, если типы указаны как - "необязательные", ну например тот же path и index - они оба являются не обязательными параметрами, то компонент должен учитывать вариант с указанием этих двух параметров

я имею ввиду должно работать так, если указать и path и index в роуте то он должен отрабатывать как index так и по своему path

должно работать так

{
                index: true,
                path: "dashboard"
                element: <DashboardLayout/>,
            }

а не вот так

{
                index: true,
                element: <DashboardLayout/>,
            },
            {
                path: "dashboard",
                element: <DashboardLayout/>,
            }