Estou fazendo uma aplicação em React e quero fazer uma checagem, se o cara estiver autenticado, redirecionar direto para a Home, se não, vai pra tela de Login, esse é o Código:
userReducer.js
const initialState = {
isAuth: false
}
rootReducers.js
export default combineReducers({
login: loginReducer,
user: userReducer
})
App.js
function App(props) {
let { isAuth } = props;
return (
<div className="App">
<Root
isAuth={isAuth}
/>
</div>
);
}
function mapStateToProps(state) {
return {
isAuth: state.user.isAuth
};
}
export default connect(mapStateToProps)(App);
root.js
class Root extends Component {
constructor(props){
super(props);
}
componentDidMount() {
if(!this.props.isAuth) {
return <Redirect to="/Login" />
}
}
render() {
return (
<BrowserRouter>
{
window.location.pathname === '/Login' ? ''
:
<Navbar
logo={ logo }
background="#fff"
hoverBackground="#ddd"
linkColor="#777"
/>
}
<Switch>
<Route path="/Login" exact component={Login} />
<Route path="/Home" component={Home} />
<Route path="/Treinos" component={Treinos} />
<Route path="/Lives" component={Lives} />
<Route path="/Video_Aulas" component={VideoAulas} />
<Route path="/" exact component={Home} />
</Switch>
</BrowserRouter>
);
}
}
export default Root;
Então, na store
eu tenho uma variável isAuth
, recebo ela no meu App.js e passo como prop
para o meu root.js, quero que quando meu root.js iniciar ele cheque se está ou não autenticado, coisa que já está fazendo, mas se não estiver if(!this.props.isAuth){...}
redirecione para '/Login'
.
Porém a variável chega nele como false
, ele identifica que é para entrar no if
mas nada acontece. Por que meu Redirect não funciona? É algum conflito com o Redux ou algo do tipo? Como resolver?