ReactJS 在点击链接后去链接的路由之前执行一个功能

Question

我已经创建了我的导航栏，当我在移动设备中打开它时，body 会应用overflow-hidden类。 当导航栏关闭时， overflow-hidden从正文中删除。

遇到的问题：当我单击链接并导航到另一个视图时，从正文中删除overflow-hidden的功能没有运行。 这意味着，在新页面上，body 已隐藏溢出，因此用户无法真正滚动到任何地方。 打开和关闭导航栏修复了该问题，因为它消除了隐藏在正文中的溢出。

我将 Laravel Breeze 与 ReactJS 一起使用。

// NavLink.js
import React, { useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { Link } from "@inertiajs/inertia-react";

export default function NavLink({ href, active, children, className = "" }) {
    return (
        <Link
            href={href}
            className={
                (active
                    ? "inline-flex items-center px-1 pt-1 border-b-2 border-[#ed8686] text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-[#E05D5D] transition duration-150 ease-in-out dark:text-gray-400"
                    : "inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out dark:text-gray-300 dark:hover:text-gray-500 dark:hover:border-gray-300 dark:focus:outline-none dark:focus:text-gray-500 dark:focus:border-gray-300") +
                ` ${className}`
            }
        >
            {children}
        </Link>
    );
}

// NavBar.js
import ApplicationLogo from "@/Components/ApplicationLogo";
import DarkModeButton from "@/Components/DarkModeButton";
import NavLink from "@/Components/NavLink";
import { Link } from "@inertiajs/inertia-react";
import React, { useEffect, useRef, useState } from "react";

import { MdClose, MdMenu } from "react-icons/md";

const NavBar = ({ dark, setDark }) => {
    const [scrollTop, setScrollTop] = useState("");
    const navRef = useRef();
    const mobileNavRef = useRef();
    const toggleNav = (e) => {
        e.preventDefault();
        const navBar = mobileNavRef.current;
        navBar.classList.toggle("active");
        document.body.classList.toggle("overflow-hidden");
    };

    const hideNav = (e) => {
        e.preventDefault();
        const navBar = mobileNavRef.current;
        navBar.classList.remove("active");
        document.body.classList.remove("overflow-hidden");
    };

    // TODO: Too many renders, change to remove extra renders
    useEffect(() => {
        if (scrollTop >= 80) {
            navRef.current.classList.add("scrolled");
        } else {
            navRef.current.classList.remove("scrolled");
        }
        const onScroll = (e) => {
            setScrollTop(e.target.documentElement.scrollTop);
        };
        window.addEventListener("scroll", onScroll);

        return () => window.removeEventListener("scroll", onScroll);
    }, [scrollTop]);

    return (
        <>
            <nav className="main-nav" ref={navRef}>
                <Link to="/" className="h-full w-auto block py-4 mx-auto">
                    <ApplicationLogo className="h-full w-auto" dark={!!dark} />
                </Link>
                <MdMenu
                    className="fixed right-4 top-4 text-lg cursor-pointer lg:hidden dark:text-white"
                    onClick={(e) => toggleNav(e)}
                />
                <ul className="hidden lg:flex flex-row items-center justify-center">
                    <li>
                        <NavLink
                            href={route("home")}
                            active={route().current("home")}
                            children="Home"
                            className="text-lg my-2 mx-4"
                        />
                    </li>
                    <li>
                        <NavLink
                            href={route("gallery")}
                            children="Gallery"
                            active={route().current("gallery")}
                            className="text-lg my-2 mx-4"
                        />
                    </li>
                    <li>
                        <NavLink
                            // href={route("about")}
                            children="About"
                            active={route().current("about")}
                            className="text-lg my-2 mx-4"
                        />
                    </li>
                    <li className="cursor-pointer flex items-center justify-center">
                        <DarkModeButton dark={dark} setDark={setDark} />
                    </li>
                </ul>
            </nav>
            <ul
                className="w-full md:w1/2 lg:w-1/4 flex items-center justify-center fixed inset-0 bg-white h-full flex-col mobile-nav lg:hidden z-50 dark:bg-gray-900"
                ref={mobileNavRef}
            >
                <MdClose
                    className="absolute top-4 right-4 text-lg cursor-pointer lg:hidden dark:text-white"
                    onClick={(e) => hideNav(e)}
                />
                <Link to="/" onClick={(e) => hideNav(e)}>
                    <ApplicationLogo
                        className="h-32 mb-2 w-auto lg:hidden"
                        dark={dark}
                    />
                </Link>
                <li>
                    <NavLink
                        href={route("home")}
                        active={route().current("home")}
                        children="Home"
                        className="text-lg my-2 mx-4"
                        onClick={(e) => hideNav(e)}
                    />
                </li>
                <li>
                    <NavLink
                        href={route("gallery")}
                        children="Gallery"
                        active={route().current("gallery")}
                        className="text-lg my-2 mx-4"
                        onClick={(e) => hideNav(e)}
                    />
                </li>
                <li>
                    <NavLink
                        // href={route("about")}
                        children="About"
                        active={route().current("about")}
                        className="text-lg my-2 mx-4"
                        onClick={(e) => hideNav(e)}
                    />
                </li>
                <li className="cursor-pointer">
                    <DarkModeButton dark={dark} setDark={setDark} />
                </li>
            </ul>
        </>
    );
};

export default NavBar;

我已经制作了具有 e.preventDefault() 的函数hideNav() e.preventDefault()但我猜它不起作用，因为它不直接应用于Link标签？ 我不确定

不确定如何解决这个问题

我考虑过使用useNavigate但我没有使用 react router dom，initialjs 正在为我处理路由，我只是在 laravel web.php文件中设置路由。

Answer 1

我想出了一个解决办法

这不是理想的解决方案，但这是我能想到的

我向NavLink组件添加了一个道具，并根据该道具是否为真，我添加了 onclick 事件处理程序，该处理程序从正文中删除溢出类

import React from "react";
import { Link } from "@inertiajs/inertia-react";
import { Inertia } from "@inertiajs/inertia";

export default function NavLink({
    href,
    active,
    children,
    className = "",
    mobileLink = false,
}) {
    return (
        <Link
            href={href}
            className={
                (active
                    ? "inline-flex items-center px-1 pt-1 border-b-2 border-[#ed8686] text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-[#E05D5D] transition duration-150 ease-in-out dark:text-gray-400"
                    : "inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out dark:text-gray-300 dark:hover:text-gray-500 dark:hover:border-gray-300 dark:focus:outline-none dark:focus:text-gray-500 dark:focus:border-gray-300") +
                ` ${className}`
            }
            onClick={
                mobileLink
                    ? (e) => {
                          e.preventDefault();
                          document.body.classList.remove("overflow-hidden");
                          Inertia.visit(href);
                      }
                    : undefined
            }
        >
            {children}
        </Link>
    );
}