Congratulations! You've successfully added styles and fonts to your React Router application! 🎉
In this exercise, you have used the
links export to include a global stylesheet and a
Google Fonts link in your app.Before we head on further, let's briefly go over when to use which approach when dealing with
styles
Rule of thumb for when to use which approach
Vite side-effect imports vs links export
I personally always use the
links export for stylesheets and fonts for two reasons, first one
being that it's closer to the react-router way of doing things which means less friction,
in the past there were some issues with HMR and side-effect imports for example,
but those have been mostly resolved now.The second reason is the separation of concerns, by using the
links export you can keep all your
metadata in one place, which makes it easier to manage and reason about. Especially in bigger apps
where you might have multiple routes and components that need different stylesheets and fonts.It's a lot easier to see all the stylesheets and fonts your app is using in one place, rather than
having to search through your entire codebase for side-effect imports and JSX metadata tags in the
code itself.
But a good place to consider using side-effect imports is for component-level styles,
like CSS modules or styled-components, where the styles are tightly coupled to the component itself.
This of course depends on the styling solution you use but the general rule of thumb is if
you can keep it on the route level use the
links export, if it's component level styles
use side-effect imports or whatever approach your styling solution recommends.React 19 JSX metadata tags vs links export
I personally prefer using React 19 JSX metadata tags for component-level styles over
side-effect imports, because it keeps the styles closer to the component itself,
which makes it easier to reason about and manage. But again, when we compare it to the
links export, I prefer using the links export for route-level stylesheets and fonts,
for the same reasons mentioned in the previous section.Summary
There is no silver bullet here, but in general I
recommend using the
links export for route-level stylesheets and fonts,
and using side-effect imports or JSX metadata tags for component-level styles.Take a breather, and let's continue once you're ready! 🚀