我使用react-router-dom版本6创建了react应用程序社交媒体平台

Question

我在登录页面中有 isAuth 功能，可以检查用户是否已通过身份验证，但我面临着这个错误，但我没有得到它。

这是错误 意外的应用程序错误！ 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因之一可能是： 1. 您的 React 和渲染器版本可能不匹配（例如 React DOM） 2. 您可能违反了 Hooks 规则 3. 您可能在其中拥有多个 React 副本相同的应用程序请参阅https://reactjs.org/link/invalid-hook-call，了解有关如何调试和解决此问题的提示。

这是处理路由的组件

import React from 'react'
import { Outlet, RouterProvider, createBrowserRouter, Navigate, useNavigate } from 'react-router-dom'
import Signin from '../pages/login/Signin'
import Signup from '../pages/signup/Signup'
import Home from '../pages/home/Home'
import Profile from '../pages/profile/Profile'
import Chatbox from '../pages/chatbox/Chatbox'
import Navbar from '../components/Navbar/Navbar'
import LeftBar from '../components/LeftBar/LeftBar'
import RightBar from '../components/RightBar/RightBar'
import UserProfile from '../components/UserProfile/UserProfile'
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import isAuthenticated from '../pages/login/Signin'


const ProtectedRoute =({element: Element, canActivate, redirectPath, ...rest}) => {
  const {user} = useSelector((state) => state.auth);
  const navigate = useNavigate();

  useEffect(() => {
    if(canActivate && !canActivate()){
      navigate(redirectPath || '/login');

    }
  },[canActivate,navigate,redirectPath]);

  return canActivate && !canActivate() ? null : <Element {...rest}/>;
}
function Layout() {
  const Feed = () => {
    return (
      <>
        <Navbar />
        <main>
          <LeftBar />
          <div className='container'>
          
          </div>
          <RightBar />
        </main>
      </>
    );
  };

  const router = createBrowserRouter([
    {
      path: '/',
      element: <ProtectedRoute element={<Feed />} canActivate={isAuthenticated} redirectPath="/login" />,
      children: [
        {
          path: '/',
          element: <Home />,
        },
        {
          path: '/profile/:id',
          element: <Profile />,
        },
        {
          path: '/chatbox/:id',
          element: <Chatbox />,
        },
      ],
    },
    // public routes
    {
      path: '/login',
      element: <Signin />,
    },
    {
      path: '/signup',
      element: <Signup />,
    },
  ]);

  return <RouterProvider router={router} />;
}

export default Layout;

登录代码片段

function Signin() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  const dispatch = useDispatch();
  const navigate = useNavigate()
  
  
  const {user,isLoading, isError, isSuccess,message} = useSelector((state) => state.auth)
  const isAuthenticated = () => !!user;

  useEffect(() => {
   

    if(isError){
      toast.error(message);
    }
    if(isSuccess || user){
      
       navigate("/");
    
   


    }
    dispatch(reset());

  },[isError,isSuccess,message,user,navigate, dispatch])

  

  const submitHandler = (e) => {
    e.preventDefault()
    if(!username){
      toast.error("Username must be provided")
    }
    if(!password){
      toast.error("Password must be provided")
    }
    const userData = {username,password}
    dispatch(login(userData))

  }

  if (isAuthenticated()){
    
    return null;
  }

Answer 1

我想说这是由于登录功能造成的：

const Signin = () => {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  const dispatch = useDispatch();
  const navigate = useNavigate()
  
  
  const {user,isLoading, isError, isSuccess,message} = useSelector((state) => state.auth)
  const isAuthenticated = () => !!user;

  useEffect(() => {
   

    if(isError){
      toast.error(message);
    }
    if(isSuccess || user){
      
       navigate("/");
    
   


    }
    dispatch(reset());

  },[isError,isSuccess,message,user,navigate, dispatch])

  

  const submitHandler = (e) => {
    e.preventDefault()
    if(!username){
      toast.error("Username must be provided")
    }
    if(!password){
      toast.error("Password must be provided")
    }
    const userData = {username,password}
    dispatch(login(userData))

  }

  if (isAuthenticated()){
    
    return null;
  }