Add Built-in Support for Document Titles via Route Config

[FranVlahovic]

Hello,
While working on a new project as a beginner developer, I noticed that it's a bit repetitive to have to use useEffect in every route component just to update the document.title. It would be much more convenient if React Router supported setting a title directly inside the route configuration.

This would improve clarity, reduce boilerplate, and make route metadata more declarative. Here’s an example of how it might look:

  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "home",
        title: "Home | MyApp", 
        element: <HomePage />
      },
      {
        path: "about",
        title: "About Us | MyApp",
        element: <AboutPage />
      },
      {
        path: "store/men",
        title: "Men's Collection | MyApp",
        element: <MenClothes />
      },
      {
        path: "store/women",
        title: "Women's Collection | MyApp",
        element: <WomenClothes />
      }
    ]
  }
];

Thanks for your beautiful library, keep up the good work!

[sergiodxa]

The framework mode let's you export a MetaFunction you can use to set the title of that route

And in general, with React 19 you could render the title tag at any point and React will move it to the head.