SolidJS•7mo ago

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•7mo 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•7mo ago

@andi this is super cool, thank you!!

Gaming

Programming

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