在 React App 中进行 Auth0 身份验证后未检测到单击事件

Question

我的 React App.js 中有一些 jQuery 代码，用于在特定媒体查询时控制我的导航栏。 @media(max-width: 870px) 导航栏应该向下滑动并在点击 nav ul 元素时显示其导航项目。一切正常，直到用户使用 Auth0 进行身份验证并被重定向回同一网页。那时，导航栏停止检测点击并且不会向下滑动，因此甚至无法注销，因为注销按钮位于导航栏内。刷新页面没有帮助。

这是我的 App.js:

import React from "react";
import './App.css';
import Navibar from "./components/Navibar";
import CarouselFront from "./components/CarouselFront";
import comp1 from "./components/Comp1";
import comp2 from "./components/Comp2";
import Footer from "./components/Footer";
import $ from "jquery";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Spinner from 'react-bootstrap/Spinner';
import { useAuth0 } from "@auth0/auth0-react";
import ProtectedRoute from "./auth/protected-route";

$(document).ready(function () {
    $(".menu-icon").on("click", function () {
        $("nav ul").toggleClass("showing");
    });
});

// Scrolling Effect

$(window).on("scroll", function () {
    if ($(window).scrollTop()) {
        $("nav").addClass("black");
    }

    else {
        $("nav").removeClass("black");
    }
});

function App() {

    const { isLoading } = useAuth0();

    if (isLoading) {
        return <Spinner animation="border" role="status" style={{ top: "50%", left: "50%", transform: "translate(-50 %, -50 %)", position: "absolute" }} />;
    }

    return (

        <Router>
            <Navibar />
            <Switch>
                <ProtectedRoute path="/comp1" component={comp1} />
                <ProtectedRoute path="/comp2" component={comp2} />
                <Route exact path="/">
                    <CarouselFront />
                </Route>
            </Switch>
            <Footer />
        </Router >
    )
};

export default App;

这里是 Auth0ProviderWithHistory 组件：

import React from "react";
import { useHistory } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";

const Auth0ProviderWithHistory = ({ children }) => {
    const domain = process.env.REACT_APP_AUTH0_DOMAIN;
    const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

    const history = useHistory();

    const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
    };

    return (
        <Auth0Provider
            domain={domain}
            clientId={clientId}
            redirectUri={window.location.origin}
            onRedirectCallback={onRedirectCallback}
        >
            {children}
        </Auth0Provider>
    );
};

export default Auth0ProviderWithHistory;

是否需要更改某些内容才能使此代码按预期工作？谢谢

Answer 1

尝试将此逻辑移入 useEffect 块

useEffect(() => {
  $(".menu-icon").on("click", function () {
        $("nav ul").toggleClass("showing");
  });

  $(window).on("scroll", function () {
    if ($(window).scrollTop()) {
        $("nav").addClass("black");
    }
    else {
        $("nav").removeClass("black");
    }
  });
}, []);

在 React App 中进行 Auth0 身份验证后未检测到单击事件

Click event not detected after Auth0 authentication in React App

javascript

jquery

reactjs

auth0