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

Question

SO 上有一些这样的问题，但它们已经过时且过时了，解决方案不再有效

我怎样才能更改页面的标题，使我在“历史记录”菜单中没有相同的名称？

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

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

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

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

没有标题只有状态对象。

该状态在 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 pattern 进一步“美化”——将标题修改逻辑从每个 element 组件移动到 HOC。

---

解析网址

或者，可以预先定义一个路由到标题的映射，并在 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 参数需要一些额外的解析。