Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

<Route onEnter={function}> foi descontinuado e substituido pelo componentDidMount...

Mas como aplicariamos no index.js esse componentDidMount? Seria essa a melhor forma de fazer? Como seria com um middleware fazendo esse trabalho? Uma luz?

3 respostas

Descobri o render do Route, to indo por ele. O codigo ta entrando nele, mas falta uma luz para renderizar o componente da Route que chamou a function authentication do index.js

/* jshint esversion: 6 */
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";
import Login from './components/Login';
import registerServiceWorker from './registerServiceWorker';
import './css/reset.css';
import './css/timeline.css';
import './css/login.css';
import {BrowserRouter as Router, Route, Switch, Redirect
} from 'react-router-dom';

function authentication(nextState) {
    console.log(nextState);

    if(localStorage.getItem('auth-token') === null){

        nextState.location.pathname = "/";
        nextState.match.path = "/";
        nextState.match.url = '/';

    } else {
        return {App};
    }
}

const loggedIn = false; 
ReactDOM.render((
  <Router>
    <Switch>
        <Route exact path="/" component={Login} />
        <Route path="/timeline" render={authentication} />
    </Switch>
  </Router>),
  document.getElementById("root")
);
registerServiceWorker();
solução!

Arrumei uma solução usando o render dentro do Route, mas e em relação as boas práticas, está certo isso???

function authentication(nextState) 
{   
    const url = nextState.location.pathname;
    if(localStorage.getItem('auth-token') === null){
        return <Login/>;
    }
    if(url != '/' && url != '/timeline'){
        return <Error url={window.location.href} />;
    }
    return <App/>;
}

ReactDOM.render((
  <Router>
    <Switch>
      <Route exact path="/*" render={authentication} />
    </Switch>
  </Router>),

Olá... Fiz da seguinte maneira e funcionou.

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

function verificaAutenticacao(nextState, replace) {

    if (localStorage.getItem('auth-token') === null) {

        return <Redirect to='/' />;
    } 
}

ReactDOM.render( 
    (
        <Router>
            <Switch>
                <Route exact path="/" component={Login} />
                <Route path="/timeline" render={verificaAutenticacao} />
            </Switch>
        </Router>
    )
    , document.getElementById('root'));
registerServiceWorker();

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software