Index route with nested routes | Remix | Page 1

restive axle Nov 3, 2022, 4:39 PM

#

Hi all. I have a parent component that defines a /overview route and renders a child component on this route.
The child component has its own navigation and I want it to have the following routes:
/overview -> Overview
/overview/:id -> Details
/overview/:id/edit -> Edit
/overview/add -> Add

And this is not working with my current implementation (pseudo code) because index routes cannot have children:

export const OverviewModule = () => {
    return (
        <Routes>
            <Route element={<Outlet />}>
                <Route
                    index
                    element={
                        // This is not allowed to have an index route with nested routes. How to achieve this?
                        <ResourceOverview />
                    }
                >
                    <Route path=":id" element={<ResourceDetails />}>
                        <Route path="edit" element={<ResourceEdit />} />
                    </Route>
                    <Route path="add" element={<ResourceAdd />} />
                </Route>
                <Route
                    path="*"
                    element={
                        // How to navigate back to the index here?
                        <Navigate to="." />
                    }
                />
            </Route>
        </Routes>
    );
};

export const App = () => {
    return (
        <Routes>
            <Route index element={<Navigate to="overview" />} />
            <Route path="overview">
                <Route index element={<OverviewModule />} />
                <Route path="import" element={<ImportPage />} />
            </Route>
        </Routes>
    );
};

Any help would be appreciated 🙂

acoustic field Nov 3, 2022, 5:31 PM

#

Sounds like you might need to look into "Pathless Routes." Assuming <ResourcesOverview /> has an outlet, you can omit the index prop.

restive axle Nov 3, 2022, 6:09 PM

#

Thanks, I will look into that!

restive axle Nov 4, 2022, 3:17 PM

#

Sadly I'm still blocked on the same issue.
Here's an even smaller reproduction of my problem:

export const OverviewModule = () => {
    return (
        <Routes>
            {/* This route is working on /overview */}
            <Route index element={<Link to="add">Go to Add page</Link>} />
            {/* This route is not working on /overview/add */}
            <Route path="add" element={<>Add page</>} />
        </Routes>
    );
};

export const App = () => {
    return (
        <Router>
            <Routes>
                <Route index element={<Navigate to="overview" />} />
                <Route path="overview">
                    <Route index element={<OverviewModule />} />
                    <Route path="import" element={<ImportPage />} />
                </Route>
            </Routes>
        </Router>
    );
};

Basically I want the parent to render the OverviewModule child on the /overview route.
Then I want the OverviewModule to have its own routing (in this example /overview and /overview/add)

#

I saw a warning saying the parent route is "" so it cannot render child routes properly and I should use "/*", but this doesn't make sense to me as I cannot use it in the parent as it would be an absolute route

robust citrus Nov 4, 2022, 7:20 PM

#

have you tried taking index off this one

<Route index element={<OverviewModule />} />

#

you can have a route that has no path or index prop

#

@restive axle

#

another approach:

<Route path"overview" element={<OverviewModule />} />
<Route path="overview/import" element={<ImportPage />} />

#Index route with nested routes