Meta Overrides
π¨βπΌ Great! Now we can customize the meta tags on our routes! Let's do a bit more
for our profile pages.
π¦ You'll notice that if you navigate to the
/users/kody
route, you'll see the
Profile | Epic Notes
in the title, which is expected. But if you navigate to a
child path, like /users/kody/notes
, you'll see only Epic Notes
again. It may
look like this is an unexpected behavior as we might be expecting the children
paths to inherit the parent's meta overrides./users/kody
and /users/kody/notes
Use case: Let's focus on
/users/kody
and /users/kody/notes
URL paths case for a while:
regardless they have a parent-child relationship in terms of their paths, they
do not have the same relationship in the REMIX's layout hierarchy. This is
how our pages are organized in terms of files inside of the routes
directory:/users/kody <=> routes/users+/$username.tsx
/users/kody/notes <=> routes/users+/$username_+/notes.tsx
That little underscore in the name of the folder
$username_+
means that the
pages inside of it don't use the layout defined in the
routes/users+/$username.tsx
file (and consequently, they won't use the meta
override defined over there). In other words: they aren't "layout-nested", even
when they are "url-nested". In summary:- In terms of URL path:
/users/kody/notes
is a child of/users/kody
- In terms of layout:
/users/kody/notes
is not a child of/users/kody
The page in
/users/kody/notes
will, in fact, use the meta override from the
first route module hierarchically above routes/users+/$username.tsx
, which is
the override we defined in the root.tsx
. You can always have a better view of
the layout-nesting by running npx remix routes
in a terminal at the root of a
remix project. Doing that you should get something like this:<Routes>
<Route file="root.tsx">
<Route index file="routes/index.tsx" />
<Route path="resources/healthcheck" file="routes/resources+/healthcheck.tsx" />
<Route path="users/:username" file="routes/users+/$username.tsx" />
<Route path="users/:username/notes" file="routes/users+/$username_+/notes.tsx">
<Route path=":noteId" file="routes/users+/$username_+/notes.$noteId.tsx" />
<Route path=":noteId/edit" file="routes/users+/$username_+/notes.$noteId_.edit.tsx" />
<Route index file="routes/users+/$username_+/notes.index.tsx" />
</Route>
</Route>
</Routes>