SolidJSS
SolidJS•2y ago•
4 replies
Mr Void

nested router, root leads to 404

I wish have the waterfall effect on rendering parent -> child components but I'm facing an issue with the following configuration. When I navigate to /flashcards I get redirected to Page404.

<Router>
    <Route path="/" component={allowAuthenticated(AppContainer)}>
        {/* other route configurations here */}

        <Route path="/flashcards" component={Flashcards}>
            <Route path="/" component={FlashcardsOverview}>
                <Route path="collection/:collection_id" component={FlashcardCollectionsView} />
            </Route>
        </Route>
    </Route>

    <Route path="*404" component={Page404} />
</Router>


I've tried doing the same as the docs:
parent is a wrapper component and contains sub-components including it's root:
<Route path="/" component={ ... }>
  <Route path="layer1" component={ ... }>
    <Route path="layer2" component={ ... }/>
  </Route>
</Route>


In my case, Flashcards is the wrapper component
const Flashcards = (props: ParentProps) => {
    return (<>{props.children}</>)
}


FlashcardsOverview is the component which should render when navigating to /flashcards

and FlashcardCollectionsView should render as a child component of FlashcardsOverview when navigating to /flashcards/collection/:id

How can I achieve this?
Why does this configuration cause 404 ?
Was this page helpful?