How to change title of the page of React-Router v6+ in history menu

Question

There are a few questions like this on SO, but they are old and outdated and solutions don't work anymore

How can I change the title of the page so I don't have the same name in the History menu?

I can't find anything in the documentation I've tried:

<Link to="/home" title="Home"/>

but it doesn't work, I was looking at the code:

export interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  reloadDocument?: boolean;
  replace?: boolean;
  state?: any;
  to: To;
}

no title only state object.

The state is visible in the migration guide from v5 but it doesn't say what it is used for. I guess it's a history state object but it has nothing to do with title AFAIK.

Is there any way to have a title change in history? This seems that pretty common behavior for routing libraries that modify history titles.

You could pass the title in route state and on the receiving routed component update the page title, or create a custom `Link` component that does this in an `onClick` handler, if *that* is what you are referring to. — Drew Reese, Apr 15 '22 at 17:55
@DrewReese I need to check if this will work since I only care about the title of the History Menu not the title of the document. And if they are handled by history API title of the page will have nothing to do with the history menu. — jcubic, Apr 16 '22 at 14:06

ilyapopovs · Accepted Answer · 2022-12-03T05:30:27.983

Passing the `title`

Given the React Router 6 code below:

// App.jsx
<Routes>
  <Route path="/home" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

It can be modified as follows to pass custom titles to corresponding components:

// App.jsx
<Routes>
  <Route path="/home" element={<HomePage title="Home"/>} />
  <Route path="/about" element={<AboutPage title="About" />} />
</Routes>

// HomePage.jsx
export function HomePage(props) {
  useEffect(() => document.title = props.title, [])
  
  return <div>...</div>
}

and then the Link can be used as per usual.
It can be further "prettified" by applying the HOC pattern - moving the title modification logic from each element component to the HOC.

Parsing the URL

Alternatively, it is possible to pre-define a route-to-title mapping and reactively update the document's title whenever the url changes:

// App.jsx
const titles = {
  '/home': 'Home',
  '/about': 'About',
}

function App() {
  const location = useLocation()
  useEffect(
    () => (document.title = titles[location.pathname] ?? 'Hello World'),
    [location],
  )

  return (
    <Routes>
      <Route path="/home" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  )
}

Although url params would require some additional parsing.

Thanks for the answer, I need to check if this will work since I don't care about the title of the document only the history menu when you right-click on the back button (in Chrome). — jcubic, Apr 16 '22 at 14:07
It works, I've expected that it will not work since you don't access `history.pushState` but it works as expected. — jcubic, Apr 16 '22 at 18:00

How to change title of the page of React-Router v6+ in history menu

1 Answers1

Passing the title

Parsing the URL

Passing the `title`