SolidJS•7mo ago

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>

<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>

<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}</>)
}

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 ?

2 Replies

peerreynders•7mo ago

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

A route component is either a Layout or a Leaf. I'm not aware that one can operate as both. I think you need something like this:

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

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

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

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

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

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

I suspect the design you are actually after is more like:

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

    <Route path="/flashcards" component={Flashcards}>
      <Route path="/" component={FlashcardsOverview} />
    </Route>
  </Route>

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

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

    <Route path="/flashcards" component={Flashcards}>
      <Route path="/" component={FlashcardsOverview} />
    </Route>
  </Route>

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

In FlashcardsOverview you then use useSearchParams (concept) to obtain searchParams['collection-id'] to determine whether or not to display FlashcardCollectionsView(collectionId) within FlashcardsOverview.

mdynnl•7mo ago

i think you can use a leaf route with empty path and a component that renders nothing so that the parent route can render

Gaming

Programming

nested router, root leads to 404