[question] Parent route layout (<Outlet />)

[gius]

I was not able to figure that out from the documentation. How do you handle a scenario when a parent route should render some layout with a child route inside? Similar to React Router's Outlet.

[molefrog]

Hi! It's currently not provided out of the box, however implementing <Outlet /> functionality shouldn't be hard. I'll try to come up with an example to illustrate my point.

[gius]

Thank you! Basically, it should be enough to figure out if a route is a parent of the current path.

E.g., that /finance and /finance/orders are parents of the current /finance/orders/123 path.

[PodaruDragos]

this would be such a good feature to have built in. looking forward to the example @molefrog

[HansBrende]

@gius @molefrog Here's an example of how this could be achieved out of the box without any "Outlet" (hint: React has its own built-in "outlet" called children). To reproduce the linked react-router example exactly (barring any silly coding mistakes I've made here since I did this off the cuff in about 30 seconds):

function Dashboard({children}: React.PropsWithChildren<{}>) {
  return (
    <div>
      <h1>Dashboard</h1>
      {children}
    </div>
  );
}

function App() {
  return (
      <Route path="/:_*">
          <Dashboard>
              <Route path="/messages"> // could also use a <Switch> here
                  <DashboardMessages/>
              </Route>
              <Route path="/tasks">
                  <DashboardTasks/>
              </Route>
          </Dashboard>
      </Route>
  );
}

There is literally no need for Outlet as far as I can tell. I always thought that was a pointless addition to react-router. Try as I might, I've never been able to come up with one single good explanation for why Outlet is necessary or desirable. Only serves to make function components less readable and entirely un-reusable outside of an outlet context (as well as adding the extra overhead of those gazillion useContext calls).

[molefrog]

I absolutely agree with @HansBrende, seems like outlets can be easily replaced with components. I understand why it is present in react-router: outlets can be found in some frameworks like Ember or Rails, so some devs might be familiar with this pattern.

I believe that wouter should not go down that route (pun intended), otherwise there is a risk of becoming 1-1 clone of react router. I like to compare it to Preact vs React. While Preact in its core has similar API as React, it does however leave aside some additional things like portals.

I'm closing this issue, thank you all for participating in this discussion.