如何從 NavLink 獲取類名或道具以在無狀態功能組件中與帶有 react 和 redux 的谷歌標簽管理器一起使用？

Question

兩個反應都很新，redux 和 gtm。 我正在嘗試使用 google tagmanager，並且我有一個導航欄，我想在其中獲取變量中每個 NavLink 的類名，以便我可以將它與我的 gtm 事件一起發送。 這樣做的原因是我可以將 gtm 事件放入點擊處理程序中，因此我不需要將完整的 gtm 代碼放入每個 onClick 中。 有沒有辦法在這個無狀態功能組件中從 Navlinks 獲取類名？ 在下面的示例中，我只在其中一個 Navlink 中放置了一個 gtm 事件（為了便於閱讀），但我的任務是在每個 NavLink 中都有一個。 如果您有任何問題，請告訴我。 任何幫助表示贊賞。 謝謝！

    const intl = useIntl();
    const isAuthenticated = useSelector(state => state.auth.token !== null);
    const locale = useSelector(state => state.common.locale);
    const user = useSelector(state => state.user.user);

    return (
        <StyledCategoryNav>
            <div className="shadow" />
            <div className="wrapper">
                <ul>
                    <li>
                        <NavLink
                            exact
                            to={`/${locale}/lobby`}
                            className="lobby"
                            onClick={() => {
                                TagManager.dataLayer({
                                    dataLayer: {
                                        event: 'open_category',
                                        locale: locale,
                                        userId: isEmpty(user) ? null : user.UserID,
                                        clicked: [Variable that takes the clicked buttons classname]
                                    }
                                });
                            }}
                        >
                            <HomeIcon />
                            {intl.formatMessage({ id: 'categories.lobby' })}
                        </NavLink>
                    </li>
                    {isAuthenticated && (
                        <li>
                            <NavLink
                                exact
                                to={`/${locale}/lobby/new`}
                                className='new'
                        >
                                {intl.formatMessage({ id: 'categories.new' })}
                            </NavLink>
                        </li>
                    )}
                    <li>
                        <NavLink exact to={`/${locale}/lobby/recommended`}
                        className='recommended'
                        >
                            {intl.formatMessage({ id: 'categories.recommended' })}
                        </NavLink>
                    </li>
                </ul>
            </div>
        </StyledCategoryNav>
    );
}

Answer 1

e.target.className應該可以解決問題。

確保使用activeClassName而不是className因為使用NavLink ，當路由匹配時， react-router 將添加一個名為active的 class ，因此在這種情況下，您的 class 名稱將由空格分隔。

演示

<NavLink
    exact
    to={`/${locale}/lobby`}
    activeClassName="lobby"
    onClick={(e) => {
        TagManager.dataLayer({
            dataLayer: {
                event: 'open_category',
                locale: locale,
                userId: isEmpty(user) ? null : user.UserID,
                clicked: e.target.className //<----here
            }
        });
    }}
>

Answer 2

在路由器參數中發送一個類名並從另一個簡單的頁面獲取該參數。 如果需要更多幫助，請告訴我。

例如：{isAuthenticated && (

<NavLink 精確到={ /${locale}/lobby/new?**classname="class-name**" } className='new' > {intl.formatMessage({ id: 'categories.new' })}

)}