如何在历史菜单中更改React-Router v6+页面的标题

Question

SO 上有一些类似的问题，但它们已经过时且陈旧，解决方案不再有效

如何更改页面标题，以免“历史记录”菜单中出现相同的名称？

我在我尝试过的文档中找不到任何内容：

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

但它不起作用，我正在查看代码：

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

没有标题，只有状态对象。

该状态在 v5 的迁移指南中可见，但没有说明它的用途。我猜这是一个历史状态对象，但它与标题 AFAIK 无关。

有什么办法可以改变历史的标题吗？对于修改历史标题的路由库来说，这似乎是很常见的行为。

Answer 1

通过title

鉴于下面的 React Router 6 代码：

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

可以修改如下，将自定义标题传递给相应的组件：

// 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>
}

然后就Link可以照常使用了。通过应用HOC 模式，
可以进一步“美化”它——将标题修改逻辑从每个组件移动到 HOC。element

解析网址

或者，可以预先定义路由到标题的映射，并在 url 发生变化时反应性地更新文档的标题：

// 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>
  )
}

尽管 url 参数需要一些额外的解析。