react router v ^ 4.0.0 Uncaught TypeError: Não é possível ler a propriedade 'localização' de indefinido

Tenho tido alguns problemas com o roteador react (estou usando a versão ^ 4.0.0).

este é meu index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, Link, browserHistory } from 'react-router';


ReactDOM.render(
  <Router history={browserHistory} >
    <Route path="/" component={App} />

  </Router>,
  document.getElementById('root')
);

o App.js é qualquer coisa. estou postando o básico aqui, porque não é o problema (acredito)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

e isso é o que acontece quando eu verifico o log do console

Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (Router.js:43)
    at ReactCompositeComponent.js:295
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

oh, e este é o package.json apenas no caso

{
  "name": "teste2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Tenho verificado isso em outros lugares, mas não encontrei uma maneira de resolver.

Muito obrigado pessoal pela paciência e ajuda !!

Você está fazendo algumas coisas erradas.

1. Primeiro, o browserHistory não é uma coisa no V4, então você pode removê-lo.

2. Em segundo lugar, você está importando tudo do react-router, deveria ser react-router-dom.

3. Terceiro, react-router-domnão exporta um Router, em vez disso, ele exporta um BrowserRouterentão você precisa import { BrowserRouter as Router } from 'react-router-dom.

Parece que você acabou de pegar seu aplicativo V3 e esperava que ele funcionasse com a v4, o que não é uma boa ideia.

Eu tentei tudo sugerido aqui, mas não funcionou para mim. Portanto, caso eu possa ajudar alguém com um problema semelhante, todos os tutoriais que verifiquei não são atualizados para funcionar com a versão 4.

Aqui está o que fiz para que funcionasse

import React from 'react';
import App from './App';

import ReactDOM from 'react-dom';
import {
    HashRouter,
    Route
} from 'react-router-dom';


 ReactDOM.render((
        <HashRouter>
            <div>
                <Route path="/" render={()=><App items={temasArray}/>}/>
            </div>
        </HashRouter >
    ), document.getElementById('root'));

Essa é a única maneira que consegui fazer funcionar sem erros ou avisos.

Caso você queira passar acessórios para o seu componente para mim, a maneira mais fácil é esta:

 <Route path="/" render={()=><App items={temasArray}/>}/>

Substituir

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

Com

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

Vai começar a funcionar. É porque react-router-dom exporta BrowserRouter

então, se você quiser usar este código)

import { useRoutes } from "./routes";

import { BrowserRouter as Router } from "react-router-dom";

export const App = () => {

const routes = useRoutes(true);

  return (

    <Router>

      <div className="container">{routes}</div>

    </Router>

  );

};

// ./routes.js 

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

export const useRoutes = (isAuthenticated) => {
  if (isAuthenticated) {
    return (
      <Switch>
        <Route path="/links" exact>
          <LinksPage />
        </Route>
        <Route path="/create" exact>
          <CreatePage />
        </Route>
        <Route path="/detail/:id">
          <DetailPage />
        </Route>
        <Redirect path="/create" />
      </Switch>
    );
  }
  return (
    <Switch>
      <Route path={"/"} exact>
        <AuthPage />
      </Route>
      <Redirect path={"/"} />
    </Switch>
  );
};