相关疑难解决方法(0)

我花了 2 天时间试图了解错误在哪里，知道吗？

应用程序.js

import React, { useState, useEffect} from 'react';
import Menu from './components/Menu';


function App() {  

    return (
        <Menu></Menu>    
    );
}

export default App;

菜单.js

import React, { useState, useContext } from 'react';
import Logout from './Logout';


function Menu() {
    return (
        <button onClick={() => Logout()}>button</button>
    );
}

export default Menu;

登出.js

import React, { useContext, useState } from 'react';
export function Logout() {

    const [user, setUser] = useState();
    const [token, setToken] = useState();

    localStorage.removeItem("token");
    localStorage.removeItem("user");
    setToken();
    setUser(); …

你好，新年快乐。我正在尝试为我的网站设置 Auth0，但收到此错误“无效的挂钩调用。挂钩只能在函数组件的主体内部调用。”

该错误指向以下代码块上的useHistory 。

我确实已经尝试了所有方法，但错误仍然存​​在。如果有人能指出我做错了什么，我将不胜感激。

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

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

    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;

我正在使用 React Hooks，当我用来自 mobx 的观察者包装我的组件时，我收到了这个错误。可能是什么问题？是否可以将 mobx 与 React Hooks 一起使用？

import classnames from 'classnames';
import { observer } from 'mobx-react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import ViewStore from '../../../store/ViewStore';

interface INavbarProps {
  viewStore: ViewStore;
}

const Navbar = observer((props: INavbarProps) => {
  const { authed } = props.viewStore;

  const [drawerIsOpen, setState] = useState(false);

  function toggleMenu() {
    drawerIsOpen ? setState(false) : setState(true);
  }

  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/admin">Admin</Link>
      <Link to="/all">All</Link>
      {authed …