反应路由器 v6 |基于路由的收藏夹图标

Question

使用React Router v6，我有一个基本的路由设置，如下所示：

<Routes>
    <Route index path={'/'} element={<Foo />} exact />
    <Route index path={'/bar/*'} element={<Bar />} />
</Routes>

---

问题:

基于 Route 更改 FavIcon 的正确（本机）方法是什么？
_{-没有任何额外的库！}

---

• Google 产生了一些结果，但没有一个能回答我的问题：

  • ReactGo
    在 React 中应避免使用 document.getElementById

  • Favicon implementation with react js
    不基于活动路线

  • Set a dynamic favicon on safari using react-hook。
    使用一些在 Safari 上不起作用的库

• there github page上没有关于此的问题

• 那里没有提到 FavIcons documentation

---

寻找一个原生的 React 解决方案来根据来自 React Router 的活动 Route 更改 FavIcon

所以只是为了澄清，我不想要任何解决方案，包括:

• document.getElementBy...()
  _和/或
• document.querySelector()

---

• 反应 17 / 18
• React 路由器 Dom 6.6.2
• 反应脚本 5.0.1

Answer 1

使用 React Router v6 基于路由更改 FavIcon 的最佳方法是使用 useLocation 挂钩。此挂钩允许您访问当前位置并读取路径名，这可用于确定活动路线。

获得活动路由后，您可以使用 React Helmet 库或内置 HTML 标签来动态更改 FavIcon。下面是一个使用 React Helmet 库的示例：

import { useLocation } from 'react-router-dom';

const MyApp = () => {
    const location = useLocation();

    // Detect changes to location pathname and update favicon href
    React.useEffect(() => {
        let favIconUrl = '/favicon.ico';
        if (location.pathname === '/foo') {
            favIconUrl = '/favicon-foo.ico';
        } else if (location.pathname === '/bar') {
            favIconUrl = '/favicon-bar.ico';
        }
        const element = document.querySelector("link[rel='shortcut icon']");
        element.setAttribute('href', favIconUrl);
    }, [location.pathname]);

    return (
        <div>
            {/* Routes, components etc. */}
        </div>
    );
};

export default MyApp;