Skip to content

Latest commit

 

History

History
24 lines (17 loc) · 1.83 KB

remix.md

File metadata and controls

24 lines (17 loc) · 1.83 KB
Raw

What is Remix?

A React Fullstack Framework that provides server-side rendering and an API Layer.

Routing

It follows a File System Route Convention where each route is defined in the routes folder.

(Soon will be changed to routes.ts approach -> https://www.youtube.com/live/fjTX8hQTlEc?si=PISGwpmF603tvre_&t=726)

Each route is a normal React component file that should include a loader function, that function runs exclusively on the server (or clientLoader for browser only). Parts of the component might be rendered client side, for that we can use React.lazy or wrap them with component from remix-utils.

Additionally, routes could also export Links and Meta functions that will be added to the html head.

For the API, we can use action/loader routes.

Migration

  • Most files have changes only to update the imports from 'react-router' to '@remix-run/react'.
  • MapPin.tsx file name changed to MapPin.client.tsx so it's not run server-side. Without this change, it throws an error 'window' isn't defined - from the leaflet package.
  • A routes folder was created, following Remix routing convention
    • Notice the $ in academy.$.tsx it ensures academy sub-routes still load the academy page.
    • _index.tsx was created to replicate the current behaviour of redirecting to the Academy page. Later it could be used for the HubPage.
    • All routes have already been migrated
    • More routing details in the link above 😊