Meta component framework mode
The Meta component is available in framework mode only.
React Router · API · all subjects
meta
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Meta component location
The Meta component is imported from the 'react-router' package.
Meta component purpose
The Meta component renders all the HTML <meta> tags created by the route module's meta export. It should be rendered inside the <head> element of your document.
Meta component signature
The Meta function takes no parameters and returns React.JSX.Element.
Meta component example
import { Meta } from "react-router"; export default function Root() { return ( <html> <head> <Meta /> </head> </html> ); }
Meta and Links components in root route
If not using React 19's native link, title, and meta components, add Meta and Links components to the root route. Meta renders all meta exports from all routes in the head, and Links renders all link exports from all routes in the head.
meta export function
Route meta defines meta tags to be rendered in the Meta component. It returns an array of meta descriptors with properties like title, property, name, and content. The meta of the last matching route is used, allowing you to override parent routes' meta. The entire meta descriptor array is replaced, not merged.
Meta component usage
The Meta component from react-router renders meta tags defined in route meta functions. It is usually placed in the document head, typically in the app root.
meta export example
Example showing meta function that returns array of meta descriptors including title, og:title property, and description name meta tags.
React 19 built-in meta element recommendation
Since React 19, using the built-in meta and title elements directly in the component is recommended over the route module's meta export. Meta tags can be rendered directly inside the route component.