Aula 04 Video 1 - Erro ao implementar matchPattern: Invalid regular expression: /^/timeline(?::/login/?/: Unterminated group | React parte 2: Container components e o ciclo de vida do react

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso React parte 2: Container components e o ciclo de vida do react

por glauciodiasj

| 215.7k xp | 9 posts

Ola, estou recebendo mensagem de erro ao implementar o matchPattern, no browser ao tentar efetuar login, apresenta na tela a mensagem: "Invalid regular expression: /^/timeline(?::/login/?/: Unterminated group", e se tento forçar o acesso digitando o nome na barra de endereço (...timeline/rafael) recebo o erro abaixo no console:

PatternUtils.js:122 Uncaught SyntaxError: Invalid regular expression: /^/timeline(?::/login/?/: Unterminated group    

The above error occurred in the <Router> component:
    in Router (at src/index.js:26)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

react-dom.development.js:20781 Uncaught SyntaxError: Invalid regular expression: /^/timeline(?::/login/?/: Unterminated group

e no browser:

SyntaxError: Invalid regular expression: /^/timeline(?::/login/?/: Unterminated group
matchPattern
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/glaucio/workspace/Alura/react/instalura/node_modules/react-router/lib/PatternUtils.js:122
  119 |   regexpSource += '$';
  120 | }
  121 | 
> 122 | var match = pathname.match(new RegExp('^' + regexpSource, 'i'));
      | ^  123 | 
  124 | if (match == null) {
  125 |   return null;

O que pode ser?

2 respostas

por glauciodiasj

| 215.7k xp | 9 posts

18/02/2019

Segue código do index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './css/reset.css';
import './css/login.css';
import './css/timeline.css';
import App from './App';
import Login from './componentes/Login';
import Logout from './componentes/Logout';
import { Router, Route, browserHistory } from 'react-router';
import {matchPattern} from 'react-router/lib/PatternUtils';
import * as serviceWorker from './serviceWorker';

function verificaAutenticacao(nextState,replace) {
    console.log(nextState);

    const resultado = matchPattern('/timeline(:/login',nextState.location.pathname);
    const enderecoPrivadoTimeline = resultado.paramValues[0] === undefined;
    console.log(resultado);
    if(enderecoPrivadoTimeline && localStorage.getItem('auth-token') === null) {
        replace('/?msg=Você precisa estar logado para acessar o endereço');
    }
}

ReactDOM.render(
    (
        <Router history={browserHistory}>
            <Route path="/" component={Login}/>
            <Route path="/timeline(/:login)" component={App} onEnter={verificaAutenticacao}/>
            <Route path="/logout" component={Logout} />
        </Router>
    ),
    document.getElementById('root')
);


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

solução!

por glauciodiasj

| 215.7k xp | 9 posts

18/02/2019

Achei o problema, estava faltando fechar um parenteses no código:

Errado:

const resultado = matchPattern('/timeline(:/login',nextState.location.pathname);

Certo:

const resultado = matchPattern('/timeline(:/login)',nextState.location.pathname);