abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 15:18:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Set The Title Of A Page as a Remix TIL

Browse Source
This commit is contained in:
jbranchaud
2022-05-23 16:26:53 -05:00
parent 3177917096
commit ab6278eb82
2 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
_1202 TILs and counting..._
_1203 TILs and counting..._
---
@@ -911,6 +911,7 @@ _1202 TILs and counting..._
- [Relative And Absolute Paths In Links](remix/relative-and-absolute-paths-in-links.md)
- [Run The Development Server From Another Port](remix/run-the-development-server-from-another-port.md)
- [Set The Title Of A Page](remix/set-the-title-of-a-page.md)
### RSpec

37
remix/set-the-title-of-a-page.md Normal file
View File

@@ -0,0 +1,37 @@
# Set The Title Of A Page
One of the reserved functions in a Remix route is `meta`. Defining this
function allows you to specify meta tags that appear in the `<head>` of a page,
including the `<title>` tag.
```
import type {
MetaFunction,
LoaderFunction
} from "@remix-run/node";
export const loader: LoaderFunction = async ({ params }) => {
// load and return the post
};
export const meta: MetaFunction = ({ data }) => {
const { title } = data?.posts || {}
return {
title: title || "An Article",
};
};
export default function Post() {
/* render the post */
}
```
The `meta` function returns an object that contains key-value pairs of meta
tags. We can include something like `title: 'Sign Up'` for a static title. Or
we can access things like `location`, `params`, and even `data` from the loader
to produce a content-specific title.
If open one of these `/posts/$slug` pages in the browser and crack open the
_View Source_, we'll be able to see the `<title>Name Of My Post</title>` tag
within the `<head>` tag.