Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

props.history is undefined

Após inserir e configurar o router no projeto eu recebo esse erro no browser:

TypeError: props.history is undefined
Router
/Users/rocha/Sites/cursos/modules/Router.js:19

  16 | super(props);
  17 | 
  18 | this.state = {
> 19 |   location: props.history.location
     | ^  20 | };
  21 | 
  22 | // This is a bit of a hack. We have to start listening for location

Esse é o meu arquivo index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Autores from './Autores';
import Livros from './Livros';
import Sobre from './Sobre';
import NotFound from './NotFound';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter, Switch, Router } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Router path="/" exact={true} component={App} />
      <Router path="/autores" component={Autores} />
      <Router path="/livros" component={Livros} />
      <Router path="/sobre" component={Sobre} />
      <Router component={NotFound} />
    </Switch>
  </BrowserRouter>,
  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: https://bit.ly/CRA-PWA
serviceWorker.unregister();
1 resposta

Fala ai Douglas, tudo bem? Acho que houve um pequeno erro na hora de importar o componente responsável pela declaração das rotas.

Você importou e está usando o Router, mas, na verdade deveria ser o Route.

import { BrowserRouter, Switch, Route } from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/" exact={true} component={App} />
      <Route path="/autores" component={Autores} />
      <Route path="/livros" component={Livros} />
      <Route path="/sobre" component={Sobre} />
      <Route component={NotFound} />
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

Isso deve resolver.

O problema é que o Router é um roteador assim como o BrowserRouter e ele exige que você passe uma propriedade chamada history para ele conseguir realizar a navegação através de pushstate e popstate, ou seja, utilizar os recursos da History API.

No caso do BrowserRouter não precisa informar um history porque por baixo dos panos ele já possuí sua própria implementação do mesmo.

Espero ter ajudado.