react router v ^ 4.0.0 Uncaught TypeError: Impossibile leggere la proprietà 'location' di undefined

Ho avuto qualche problema con il router React (sto usando la versione ^ 4.0.0).

questo è il mio 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')
);

l'App.js è qualsiasi cosa. Sto postando quello di base qui, perché non è il problema (credo)

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 questo è ciò che accade quando controllo il registro della 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 questo è il package.json per ogni evenienza

{
  "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"
  }
}

L'ho verificato in altri posti, ma non ho trovato un modo per risolverlo.

Grazie mille ragazzi per la vostra pazienza e aiuto !!

Stai sbagliando alcune cose.

1. Innanzitutto, browserHistory non è una cosa in V4, quindi puoi rimuoverlo.

2. Secondo, stai importando tutto da react-router, dovrebbe essere react-router-dom.

3. Terzo, react-router-domnon esporta a Router, invece, esporta a BrowserRouterquindi è necessario import { BrowserRouter as Router } from 'react-router-dom.

Sembra che tu abbia appena preso la tua app V3 e ti aspettassi che funzionasse con la v4, il che non è una grande idea.

Ho provato tutto ciò che viene suggerito qui ma non ha funzionato per me. Quindi, nel caso in cui posso aiutare qualcuno con un problema simile, ogni singolo tutorial che ho controllato non è aggiornato per funzionare con la versione 4.

Ecco cosa ho fatto per farlo funzionare

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'));

È l'unico modo in cui sono riuscito a farlo funzionare senza errori o avvisi.

Nel caso tu voglia passare gli oggetti di scena al tuo componente per me, il modo più semplice è questo:

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

Sostituire

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

Con

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

Inizierà a funzionare. È perché react-router-dom esporta BrowserRouter

quindi se hai bisogno usa questo codice)

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>
  );
};