S
SolidJS•3y ago
Mathieu

Use of `<Outlet />` vs `props.children` leads to duplicated code?

const EnsureAuthenticated: VoidComponent = () => {
  return (
    <Switch>
      <Match when={/* ... */}>
        <Loader />
      </Match>
      <Match when={/* ... */}>
        /* ... */
      </Match>
      <Match when={/* ... */}>
        <Outlet />
      </Match>
    </Switch>
  );
};
const EnsureAuthenticated: VoidComponent = () => {
  return (
    <Switch>
      <Match when={/* ... */}>
        <Loader />
      </Match>
      <Match when={/* ... */}>
        /* ... */
      </Match>
      <Match when={/* ... */}>
        <Outlet />
      </Match>
    </Switch>
  );
};
Take this component which renders <Outlet /> to render child routes. I want to reuse this component but not in a routing context, and I need to make use of props.children, as I want to render child components and not child routes. This leads me to having to duplicate the component code only because I need to use props.children instead of <Outlet />. Anyone struggled with this?
2 Replies
andi
andi•3y ago
you could do something like this 
const EnsureAuthenticated = (props) => {
  return (
    <Switch>
      <Match when={/* ... */}>
        <Loader />
      </Match>
      <Match when={/* ... */}>
        /* ... */
      </Match>
      <Match when={/* ... */}>
        {props.children}
      </Match>
    </Switch>
  );
};
const EnsureAuthenticatedRouting = () => (
  <EnsureAuthenticated>
    <Outlet />
  </EnsureAuthenticated>
)
const EnsureAuthenticated = (props) => {
  return (
    <Switch>
      <Match when={/* ... */}>
        <Loader />
      </Match>
      <Match when={/* ... */}>
        /* ... */
      </Match>
      <Match when={/* ... */}>
        {props.children}
      </Match>
    </Switch>
  );
};
const EnsureAuthenticatedRouting = () => (
  <EnsureAuthenticated>
    <Outlet />
  </EnsureAuthenticated>
)
and use one or the other depending on context, but the logic is only in one place
Mathieu
MathieuOP•3y ago
@andi this is super cool, thank you!!

Did you find this page helpful?