Skip to main content

Olá, estouEstou 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

--userReducer.js--

const initialState = {
    isAuth: false
}

--rootReducers.js--

rootReducers.js

export default combineReducers({
    login: loginReducer,
    user: userReducer
})

--App.js--

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--

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 Storestore eu tenho uma variável isAuthisAuth, recebo ela no meu App.jsApp.js e passo como propprop para o meu root.jsroot.js, quero que quando meu root.jsroot.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''/Login'.

Porém a variável chega nele como Falsefalse, ele identifica que é para entrar no Ifif mas nada acontece, por. Por que meu Redirect não funciona? É algum conflito com o Redux ou algo do tipo? Como resolver?

Olá, 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?

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?

Fonte Link
Ban
  • 127
  • 3
  • 12

React-router <Redirect> não funciona

Olá, 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?