\"}),\" and \",(0,a.jsx)(e.code,{children:\"<meta>\"}),` tags into the document head for you automatically,\nwhich would produce the following HTML:`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"head\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">My Page Title</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"meta\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"name\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"content\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"My Page Description\"}),'\"',\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"head\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"id\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),'\"',\"> \",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">Hello World</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\" </\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`Now that you understand how the hoisting mechanism works, let's see how we can use\nthis to our advantage by adding titles to our pages using React.`}),`\n`,(0,a.jsx)(e.p,{children:`Every route in the project has instructions on what you need to do, go Koala hunting\nand try to add titles to all the pages!`}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags\",children:\"https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags\"})]}),`\n`,(0,a.jsxs)(e.p,{children:[\"In this exercise, we're going to use the \",(0,a.jsx)(e.code,{children:\"meta\"}),\" export to add titles to our pages.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Here's a quick overview of how the \",(0,a.jsx)(e.code,{children:\"meta\"}),\" export works:\"]}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[\"The \",(0,a.jsx)(e.code,{children:\"meta\"}),\" export is a function that returns an object containing metadata for the route.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[\"The keys of the object correspond to the metadata properties, such as \",(0,a.jsx)(e.code,{children:\"title\"}),\", \",(0,a.jsx)(e.code,{children:\"description\"}),\", etc.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[`The values of the object are the values of the metadata properties.\nHere's an example of how to use the `,(0,a.jsx)(e.code,{children:\"meta\"}),\" export to add a title to a route:\"]}),`\n`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"MetaFunction\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"meta\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MetaFunction\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\" title: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"My Page Title\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\" description: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"My Page Description\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]})]})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}return N(w);})();\n;return Component;",[],{"_9":354,"_354":355},{"_9":354,"_358":379,"_110":111},6012,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/02.problem.titles-react?title=Adding+Titles+with+React+19+%28problem%29",{"_20":51,"_71":51,"_335":382,"_22":52,"_24":53,"_337":383,"_350":384,"_352":385,"_356":386,"_360":388,"_185":197,"_187":197,"_9":196,"_371":-5},"02.solution.titles-react","var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(i=u(e,o))||i.enumerable});return t};var w=(t,e,n)=>(n=t!=null?l(x(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>s(r({},\"__esModule\",{value:!0}),t);var c=m((S,d)=>{d.exports=_jsx_runtime});var _={};y(_,{default:()=>h,frontmatter:()=>b});var a=w(c()),b=void 0;function p(t){let e={code:\"code\",p:\"p\",...t.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Congratulations! You have completed the exercise. \\u{1F389}\"}),`\n`,(0,a.jsx)(e.p,{children:\"In this exercise, you have used React 19 JSX metadata tags to add titles to your pages.\"}),`\n`,(0,a.jsx)(e.p,{children:\"But we have a big problem!!\"}),`\n`,(0,a.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Peter isn't happy with us!! He says we introduced a big bug in our app! Namely,\nif you go to the products pages, especially on the individual product pages, the titles\nare doubled and we have 2x titles per page! \\u{1F631}`}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} He also doesn't like the fact that we don't have a shared prefix for our titles. He\nexpected every page to start with Epic Shop - `,(0,a.jsx)(e.code,{children:\"<Page Specific Title>\"}),` instead of what we\nhave now!`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Let's fix this by using the \",(0,a.jsx)(e.code,{children:\"meta\"}),` export instead of React 19 JSX metadata tags to add titles\nto our pages and also add a shared prefix to all our titles!`]}),`\n`,(0,a.jsx)(e.p,{children:\"Take a breather, and let's continue once you're ready! \\u{1F680}\"})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,{...t,children:(0,a.jsx)(p,{...t})}):p(t)}return v(_);})();\n;return Component;",[],{"_9":354,"_354":355},{"_9":354,"_358":387,"_110":111},7012,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/02.solution.titles-react?title=02.02.solution+%28solution%29",{"_187":248,"_184":390,"_196":398},{"_20":55,"_71":314,"_335":391,"_22":56,"_24":57,"_337":392,"_350":393,"_352":394,"_356":395,"_360":397,"_185":197,"_187":248,"_9":184,"_362":59},"03.problem.titles-with-meta","var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var a in e)o(n,a,{get:e[a],enumerable:!0})},r=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!f.call(n,i)&&i!==a&&o(n,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return n};var x=(n,e,a)=>(a=n!=null?u(w(n)):{},r(e||!n||!n.__esModule?o(a,\"default\",{value:n,enumerable:!0}):a,n)),b=n=>r(o({},\"__esModule\",{value:!0}),n);var s=y((j,h)=>{h.exports=_jsx_runtime});var v={};g(v,{default:()=>l,frontmatter:()=>T});var t=x(s()),T=void 0;function c(n){let e={code:\"code\",h1:\"h1\",h2:\"h2\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.h1,{children:[\"Metadata with the \",(0,t.jsx)(e.code,{children:\"meta\"}),\" export\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Our manager is not happy with us! We introduced a bug and we didn't add a prefix\nin the titles! He wants all our titles to start with `,(0,t.jsx)(e.code,{children:\"Epic Shop - <Page Specific Title>\"}),`.\nHe also wants us to fix the bug with the doubled titles on the product pages!`]}),`\n`,(0,t.jsx)(e.p,{children:`But, before we do that let's first understand how the React 19 JSX metadata tags work and\nwhy the bug happened in the first place.`}),`\n`,(0,t.jsx)(e.h2,{children:\"The Hoisting Mechanism\"}),`\n`,(0,t.jsxs)(e.p,{children:[`React 19 hoisting mechanism automatically moves certain elements from the body of your document\nto the head of your document. This includes elements like `,(0,t.jsx)(e.code,{children:\"<title>\"}),`, but the issue is it doesn't\nde-duplicate them if you already have a title in the head, which is what happened in our case.`]}),`\n`,(0,t.jsx)(e.p,{children:`When we added titles using React 19 JSX metadata tags, they were hoisted to the head of the document,\nbut since we already had titles defined in the head (defined by a route above the specific product route),\nwe ended up with two titles in the head, which is not valid HTML and can cause issues with SEO and\naccessibility.`}),`\n`,(0,t.jsxs)(e.p,{children:[\"To fix this, we need to use the \",(0,t.jsx)(e.code,{children:\"meta\"}),` export provided by React Router, which allows us to define\nmetadata for our routes in a more structured way. This way, we can ensure that we only have one title\nper page and we can also easily add a prefix to all our titles.`]}),`\n`,(0,t.jsxs)(e.h2,{children:[(0,t.jsx)(e.code,{children:\"meta\"}),\" export\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"meta\"}),\" export is a function that returns an object containing metadata for the route.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The cool thing about the \",(0,t.jsx)(e.code,{children:\"meta\"}),` export is that it allows us to define metadata for our routes\nin a more structured way by giving us the data returned from loaders, and also the parent\nroutes metadata, which allows us to easily create dynamic titles and other metadata based on the\ndata returned from our loaders.`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this exercise, we're going to use the \",(0,t.jsx)(e.code,{children:\"meta\"}),\" export to add titles to our pages.\"]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(c,{...n})}):c(n)}return b(v);})();\n;return Component;",[],{"_9":354,"_354":355},{"_9":354,"_358":396,"_110":111},6013,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/03.problem.titles-with-meta?title=export+%28problem%29",{"_20":59,"_71":59,"_335":399,"_22":60,"_24":61,"_337":400,"_350":401,"_352":402,"_356":403,"_360":405,"_185":197,"_187":248,"_9":196,"_371":-5},"03.solution.titles-with-meta","var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!x.call(t,a)&&a!==o&&r(t,a,{get:()=>e[a],enumerable:!(i=p(e,a))||i.enumerable});return t};var w=(t,e,o)=>(o=t!=null?l(f(t)):{},s(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>s(r({},\"__esModule\",{value:!0}),t);var d=y((Y,c)=>{c.exports=_jsx_runtime});var j={};g(j,{default:()=>h,frontmatter:()=>v});var n=w(d()),v=void 0;function u(t){let e={code:\"code\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"Well done! You have successfully added metadata to your routes using the \",(0,n.jsx)(e.code,{children:\"meta\"}),` export.\nThis allows you to set dynamic titles for each page in your application by merging\nthe parent route's metadata with the current route's metadata.`]}),`\n`,(0,n.jsx)(e.p,{children:`You have also ensured that all titles have a consistent prefix, \"Epic Shop -\", which\nimproves the branding and recognition of your application.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"Now that you fully understand the \",(0,n.jsx)(e.code,{children:\"meta\"}),` export and how to use it effectively, let's\nmove onto the next module when you're ready!`]}),`\n`,(0,n.jsx)(e.p,{children:\"You're doing great! \\u{1F680}\"})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}return _(j);})();\n;return Component;",[],{"_9":354,"_354":355},{"_9":354,"_358":404,"_110":111},7013,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/03.solution.titles-with-meta?title=02.03.solution+%28solution%29",[407,411,415],{"_20":39,"_71":310,"_335":348,"_22":40,"_24":41,"_337":349,"_350":408,"_352":409,"_356":410,"_360":361,"_185":197,"_187":186,"_9":184,"_362":43},[],{"_9":354,"_354":355},{"_9":354,"_358":359,"_110":111},{"_20":47,"_71":312,"_335":374,"_22":48,"_24":49,"_337":375,"_350":412,"_352":413,"_356":414,"_360":380,"_185":197,"_187":197,"_9":184,"_362":51},[],{"_9":354,"_354":355},{"_9":354,"_358":379,"_110":111},{"_20":55,"_71":314,"_335":391,"_22":56,"_24":57,"_337":392,"_350":416,"_352":417,"_356":418,"_360":397,"_185":197,"_187":248,"_9":184,"_362":59},[],{"_9":354,"_354":355},{"_9":354,"_358":396,"_110":111},[420,424,428],{"_20":43,"_71":43,"_335":364,"_22":44,"_24":45,"_337":365,"_350":421,"_352":422,"_356":423,"_360":370,"_185":197,"_187":186,"_9":196,"_371":-5},[],{"_9":354,"_354":355},{"_9":354,"_358":369,"_110":111},{"_20":51,"_71":51,"_335":382,"_22":52,"_24":53,"_337":383,"_350":425,"_352":426,"_356":427,"_360":388,"_185":197,"_187":197,"_9":196,"_371":-5},[],{"_9":354,"_354":355},{"_9":354,"_358":387,"_110":111},{"_20":59,"_71":59,"_335":399,"_22":60,"_24":61,"_337":400,"_350":429,"_352":430,"_356":431,"_360":405,"_185":197,"_187":248,"_9":196,"_371":-5},[],{"_9":354,"_354":355},{"_9":354,"_358":404,"_110":111},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Router%20Fundamentals%20part%201%20%E2%9B%93%EF%B8%8F&entry.428900931=Metadata","epicVideoInfosPromise",["P",435],"exerciseFinished",{"_438":439,"_24":440},"file","/myapp/workshop-content/exercises/02.metadata/FINISHED.mdx","exercises/02.metadata/FINISHED.mdx","prevStepLink",{"_443":444,"_445":446},"to","/exercise/02/03/solution","aria-label","02.03.solution (solution)","nextStepLink",{"_443":449,"_445":450},"/finished","Finished! 🎉","actionData","errors"] </article></body></html>

02. Metadata/Elaboration

You just finished your first exercise! 🎉