Exportar o browserHistory no react-router

Bom dia Pedro, tudo bem? Você adicionou o "browserHistory" nos imports do react-router?

import {Router,Route,browserHistory} from 'react-router';

Espero ter ajudado.

Olá Gustavo.

No index.js? Sim, ele está importado em:

import {Router,Route,browserHistory} from 'react-router';

Recebo também esse erro no console:

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
    in Router (at index.js:20)

Segui com a aula e tentei aplicar o código da aula 4, o que me retornou um novo erro.

./src/index.js
Module not found: Can't resolve 'react-router/lib/PatternUtils' in 'C:\Users\drope\Documents\Alura\react2\node_modules\.bin\instalura\src'

Não entendi, porque ele está tentando importar o matchPattern à partir da pasta /src e não da /node_modules de onde deveria acessar a dependência do react-router.

Para constar o react-router está instalado e importado no index.js:

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

Podem me dar uma força? Obrigado!

De qualquer forma me parece o mesmo erro, já que tem a ver com o index.js e ao react-router.

Pessoal, percebi que, além dele estar buscando o meu react-router na pasta errada, o meu react router na verdade não tem a pasta react-router/lib/PatternUtils, somente uma pasta /es e outra /umd.

Além disso não consigo encontrar o arquivo PatternUtils

Meu react-router está setano no packege.json como:

"react-router": "^4.1.1"

Alguma dica? Obrigado.

Estou com o mesmo problema, li que precisa está na versão 3.0.0, instalei o react router na v3 e continuou igual.

'react-router' does not contain an export named 'browserHistory'.

Olá Pedro,

Você está utilizando a versão 4.1.1 do react-router, entretanto, a aula foi montada utilizando a versão 3.0.0.

Como ocorreram algumas mudanças entre essas versões, você não vai conseguir usar o mesmo código da aula.

A opção mais prática é remover a sua versão atual do react-router e instalar a mesma utilizada na aula.

Para desinstalar a sua versão atual:

npm uninstall react-router --save

Para instalar a versão 3.0.0 utilizada na aula:

npm install react-router@3.0.0 --save

A outra opção é você continuar usando a versão 4 e adequar o código para essa nova versão. Eu acabei instalando a versão 4 pra me aventurar e já consegui ajustar algumas coisas do código, segue algumas diferenças:

Ao invés de instalar o react-router, instalei o react-router-dom.

Meu import no index.js ficou assim:

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

O render do index.js ficou assim:

ReactDOM.render(
  (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route path="/logout" component={Logout} />
        <Route exact path="/timeline" render={() => (
          isLoggedIn() ? (
            <Redirect to="/?msg=Você precisa estar logado para acessar o endereço"/>
          ) : (
            <App />
          )
        )}/>
      </Switch>
    </BrowserRouter>
  ),
  document.getElementById('root')
);

Ao invés da função verificaAutenticacao, criei uma função isLoggedIn que é usada no código acima para verificar se deve ser redirecionado para a tela de login ou para o App:

function isLoggedIn() {
  return localStorage.getItem('auth-token') === null;
}

Para tratar a mensagem de redirecionamento do Login.js, fiz assim:

constructor(props) {
    super(props);

    var msg = '';
    const queryParams = new URLSearchParams(props.location.search);
    const queryMsg = queryParams.get('msg');
    if(queryMsg) {
      msg = queryMsg;
    }

    this.state = {msg: msg};
  }

Para o push de redirecionamento no Login.js não importei o browserHistory, acabei usando history das props, por exemplo o redirect após a autenticação ficou assim:

this.props.history.push('/timeline');

Obs: Estou na metade do curso e até então esses foram os ajustes que precisei fazer para a versão 4, ainda estou ajustando algumas coisas e provavelmente terão mais...

Complementando a resposta sobre o React Router v4 do Diego, é possível usar uma biblioteca chamada query-string para realizar o parse dos parâmetros na URL. Logo, o state do componente Login ficaria da seguinte forma:

import queryString from 'query-string';

\\ Declaração da classe

constructor(props) {
    super(props);
    this.state = {msg: queryString.parse(this.props.location.search).msg}
}

Quem quiser se aventurar um pouco mais a respeito do Router v4, dá para ver um flow de autenticação para web a partir desse link.