Exclude a page from _layout

Question

Hello I am new to Svelte, Sapper & Express.

The problem:
I am using Sappers _layout.html to display 2 components (header & menu) that should be displayed on all pages, save for the login page.

What is the right way to achieve this ?

Possible solutions:
A) Serve the login page from the static folder, and use the express middleware to route to it?

B) Have the login as the root of my project and move all other routes down a level so they can share a common layout that dosnt involve the login page?

C) Put and if statement in the layout and determine when the user is on the login page to hide the header & menu components.

D) Not use the layout to display the components.

Answer 1

My preferred solution to this problem is option C — using child.segment to control which layout is used:

<!-- src/routes/_layout.html -->
{#if child.segment === 'login'}
  <svelte:component this={child.component} {...child.props}/>
{:else}
  <div class="fancy-layout">
    <svelte:component this={child.component} {...child.props}/>
  </div>
{/if}