S
SolidJS•2y ago
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>
<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
peerreynders•2y 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
mdynnl•2y 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

Did you find this page helpful?