Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

React Router Dom

Referente ao curso React parte 2: Container components e o ciclo de vida do react, no capítulo Navegação entre os usuários e mais um pouco de router e ciclo de vida e atividade 1- Liberando o acesso para timeline pública

por Brendo Yuri Maia do Vale
| 369k xp | 16 posts

Não consegui implementar o import

 {matchPattern} from 'react-router/lib/PatternUtils';

react-router não está funcionando mais... :/

meu código está assim 


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

function verificaUsuarioLogado()
{
  if(localStorage.getItem('auth-token') === null){
    return false
  }

  return true;

}

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        verificaUsuarioLogado() ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: "/", state: { from: props.location } }}
          />
        )
      }
    />
  );
}

ReactDOM.render(
  (
    <Router>
        <Switch>
          <Route exact path="/" component={Login} /> 
          <Route path="/logout" component={Logout} /> 
          <Route path="/timeline(/:login)" component={App} /> 
          <PrivateRoute path="/timeline" component={App} onEnter={verificaUsuarioLogado} /> 
        </Switch>
    </Router>
  ),
  document.getElementById('root')
);
3 respostas
solução!
por Instrutor
| 1131.4k xp | 1471 posts
Instrutor

Brendo, boa tarde!

Esse curso está sendo refeito, mas sempre que precisar de ajuda estamos aqui pra ajudar!

Primeiro nós precismos instalar, uma lib de history, usando o npm:

 npm install --save history

Depois de instalado, nós precisamos importar o módulo de criar uma history

import {createBrowserHistory} from 'history';

Na função de que verifica a autorização nós implementamos history

function verificaAutorizacao() {
    const history = createBrowserHistory();
    const match = matchPath(history.location.pathname, {path: '/timeline/:login'});

    const privateRoute = match === null;
    if (privateRoute && localStorage.getItem('auth-token') === null) {
        return false
    }
    return true
}

E nós vamos criar uma rota com essa verificação, ou seja, se tiver nulo abre um componente, caso contrário, abrimos a tela da timeline e a outra rota é para a time sem parâmetros

<Route path="/timeline/:login" component={App}/>
       <Route exact path="/timeline" render={() => (
            verificaAutorizacao() ? <App/> :
                <Redirect to={'/?msg=Você precisa estar logado para acessar a timeline'}/>
        )}/>

Espero ter ajudado e qualquer dúvida só mandar no fórum :)

por Brendo Yuri Maia do Vale
| 369k xp | 16 posts

tem alguma previsão de lançamento do novo curso de react?

por Instrutor
| 1131.4k xp | 1471 posts
Instrutor

Brendo, boa tarde!

Não temos previsão. :(, mas ele já está em desenvolvimento!