DEV Community

Eakam
Eakam

Posted on

Starchart: Remix routes setup

The past week, I worked on setting up basic user dashboard pages and routes for starchart. These routes involved pages for management, creation, and help for domains and certificates. The ideas was to setup a basic template, such as a heading, and the routes so these could be easily updated once the designs were finished.

Since starchart uses Remix, this was a straightforward process. Routing in remix can be configured by the file structure for the routes(more info here). So, I setup an initial folder structure for the difference pages:

app/routes/
  -- certificates/
    -- index.tsx
    -- instructions.tsx
    -- new.tsx
  -- domains/
     -- $domainId.tsx
     -- index.tsx
     -- new.tsx
Enter fullscreen mode Exit fullscreen mode

This defined the following routes (in same order as above):

  • /certificates
  • /certificates/instructions
  • /certificates/new
  • /domains/:domainId
  • /domains
  • /domains/new

After creating a PR, I got a suggestion to add another component for the header that shows on these pages. So, I thought how I could show the header on all pages without including it everywhere. Initially, I created parent routes for the certificates and domains routes:

app/routes/
  ...
  -- certificates.tsx
  -- domains.tsx
  ...
Enter fullscreen mode Exit fullscreen mode

These only served to include the header, and then rendered the children using the <Outlet />:

import { Outlet } from '@remix-run/react';

import Header from '~/components/header';

export default function DomainsRoute() {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

I got another suggestion to move it up another level so I would not have to include the header in two parent route files. I thought about moving it to the root file. However, this would mean that the header would also render on the login page, or more logic would need to be added to hide the header if the user was not logged in. I tried looking for a way to do this purely through the file structure, and found this helpful blog post.

To summarize, I added a pathless layout route for the index page, and placed my routes inside the __index directory. Thus, my routes would be children of the __index route (which does not have a URL and is simply the layout for these routes). The index page itself is also inside this directory. And since the login page is still separate, it is unaffected:

app/routes/
  -- __index.tsx
  -- login.tsx
  ...
  -- __index/
    -- certificate/
      -- index.tsx
      ...
    -- domains/
      -- index.tsx
      ...
    -- index.tsx
Enter fullscreen mode Exit fullscreen mode

__index.tsx is the same as the previous parent layout routes:

import { Box } from '@chakra-ui/react';
import { Outlet } from '@remix-run/react';
import Header from '~/components/header';

export default function Index() {
  return (
    <Box>
      <Header />
      <main>
        <Outlet />
      </main>
    </Box>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)