I have the following code for my routes in using react-router 6.23.0

const router = createBrowserRouter([
    {
        path: '/fruits',
        element: <Root />,
        errorElement: <ErrorPage />,
        loader: fruitloader,
        children: [
            {
                loader: bananaLoader,
                index: true,
                path: 'banana-services?',
                element: <BananaServices />
            },
            {
                loader: appleLoader,
                path: 'apple-services',
                element: <AppleServices />
            },
            {
                Loader: 'orangeLoader',
                path: 'orange-services'
                element: <OrangeServices />
            }
        ]
    }
]);

<AppContainerInnerContainer>
    <GlobalStyles />
    <Sidebar>
        <NavLink to="fruits/banana">Banana</NavLink>
        <NavLink to="fruits/apple">Apple</NavLink>
        <NavLink to="fruits/orange">Orange</NavLink>
    </Sidebar>
    <Detail>
        <Outlet />
    </Detail>
</AppContainerInnerContainer>

My requirement is that in the url path I don’t want the child paths to show after navigating to the “page”.

For example, when a user clicks on “Banana”, instead of what react-router gives me, http://www.example.com/fruits/banana

I want http://www.example.com/fruits but still be able view the banana page. Sidebar should still be intact on the left side.

Any help would be appreciated here!