Sou novo no react e estou tentando implementar um controle de rotas, para isso criei um arquivo Auth:
const Auth = {
isAdmin: false,
authenticate(){
this.isAdmin = true
},
signout(){
this.isAdmin = false
},
getAuth(){
return this.isAdmin;
}
}
export default Auth
Quando eu faço o login e o logout tudo ocorre de acordo, no login o isAdmin passa a valer true e no logout passa a valer false. Porém no if ternário para mostrar a opção de logout não funciona, é como se não fizesse a comparação. Mas na hora de imprimir o valor do isAdmin, aparece o valor correto:
{Auth.getAuth() ?( <li className="nav-item active">
<a href="#" onClick={logout} style={{ textDecoration: "none" }}>
<p className="nav-link">Log Out</p>
</a>
</li>) : null}
mas mesmo com o isAdmin sendo true, essa li não é renderizada, e o mesmo acontece para o controle de rota protegida, nunca consigo acessar mesmo o isAdmin sendo true:
function App() {
return (
<div>
<div className="App">
<Header />
<Switch>
<Route exact path="/" component={PostInfo} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Route path="/post/:slug" component={Post} />
<PrivateRoute path="/add" component={Add} />
</Switch>
</div>
</div>
);
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={(props) =>
Auth.getAuth() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/",
}}
/>
)
}
/>
);
Não consigo achar um problema no código... e pesquisei bastante mas tudo parece estar correto