Question

所以我有一个反应应用程序，我想在身份验证后将用户重定向到仪表板。我正在使用 react-router-dom。令人惊讶的是，在完成所有设置后，我尝试在没有身份验证的情况下访问受保护的路由，它会将我重定向回主页，该主页也运行良好，当我控制台日志以检查用户验证功能是否有效时。它返回经过身份验证的用户，这意味着它也运行良好。但是当我以用户身份登录时，反应应该呈现仪表板，但不幸的是它没有。我现在很困惑。请一些帮助将不胜感激。谢谢

ProtectedRoute.js

import React from 'react';
import PropTypes from 'prop-types';
import {Route,Redirect} from 'react-router-dom';

const ProtectedRoute = ({isAuth:isLoggedin,component:Component,...rest})=>{
    console.log(Component,isLoggedin)
    return (
        <Route 
    {...rest} 
   
    render={(props)=>{
        if(isLoggedin){
            return <Component />
        }else{
           return(
            <Redirect  to={{
                pathname:'/',
                state: {from: props.location}
            }}
            />
           )
        }
    }
    }
    />
    )
}
export default ProtectedRoute;

ProtectedRoute.propTypes={
    isAuth: PropTypes.bool.isRequired
}

App.js

const App = ()=>{
    const [isClicked, setIsClicked]= useState(false);
    const [username,setUsername] = useState()
    const [pass,setPass] = useState();
    const [isLoggedIn,setIsLoggedIn] = useState(false);
    const [authUser,setAuthUser] = useState({})

    


    const disableScroll =()=>{
        document.body.style.overflow = 'hidden';
        document.querySelector('html').scrollTop = window.scrollY;
        }
        
        const enableScroll=()=>{
        document.body.style.overflow = null;
        }
    const handleLogin = () =>{
        setIsClicked(!isClicked);
        if(!isClicked){disableScroll()}
        else if(isClicked){enableScroll()}
    }
    const handleLogout = ()=>{
        setIsLoggedIn(!isLoggedIn)
        {<Redirect to={{
            pathname: "/",
            state: { from: props.location }
             }}
             />}
      console.log(isLoggedIn)
    }
    const getUser = ()=>{
            Users.forEach((user)=>{
                if(user.username === username)return user
            })
    }
    
    const login=()=>{
        const curUser = Users.filter((el)=>{
            if(el.username === username) return el
        })
          if(curUser[0].username === username && curUser[0].pass.toString() === pass){
            setAuthUser(curUser[0]);
            setIsLoggedIn(!isLoggedIn)
            enableScroll();
          }else{alert('invalid username or password')}
      }
    
    return( 
        <LoginContext.Provider value={{isClicked,setIsClicked,handleLogin,setUsername,
        setPass,login,isLoggedIn,authUser,setAuthUser,handleLogout}}>
        <BrowserRouter>
        <Switch>
        <Route exact path='/' component={HomePage}>
            <HomePage/>
        </Route> 
        <ProtectedRoute  exact path='/Dashboard' isAuth={isLoggedIn}   component={Dashboard}/>
        </Switch>
        </BrowserRouter>
        
        </LoginContext.Provider>
        
       
        
        
        
    );
}

export default App;

受保护的路由在身份验证后不呈现受保护的组件

0 个答案: