如何在历史菜单中更改 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;
}

没有标题只有状态 object。

状态在 v5 的迁移指南中可见，但没有说明它的用途。我想这是一个历史状态 object 但它与标题 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

或者，可以 pre-define 一个 route-to-title 映射，并在 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 参数需要一些额外的解析。

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

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

reactjs

react-router

react-router-dom

传递 `title`

正在解析 URL

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

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

reactjs

react-router

react-router-dom

传递 title

正在解析 URL

传递 `title`