React Router v ^ 4.0.0 Nicht erfasst TypeError: Die Eigenschaft 'location' von undefined kann nicht gelesen werden

Ich habe einige Probleme mit dem React Router (ich verwende Version ^ 4.0.0).

das ist meine 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')
);

Die App.js ist einfach alles. Ich poste das grundlegende hier, weil es nicht das Problem ist (ich glaube)

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;

und das passiert, wenn ich das Konsolenprotokoll überprüfe

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, und das ist die package.json für alle Fälle

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

Ich habe dies an anderen Stellen überprüft, aber ich habe keinen Weg gefunden, es zu lösen.

Vielen Dank für Ihre Geduld und Hilfe!

Du machst ein paar Dinge falsch.

1. Erstens ist browserHistory in V4 keine Sache, also können Sie das entfernen.

2. Zweitens importieren Sie alles von react-router, es sollte sein react-router-dom.

3. Drittens react-router-domexportiert a Routernicht, sondern exportiert a, BrowserRouteralso müssen Sie import { BrowserRouter as Router } from 'react-router-dom.

Sieht so aus, als hätten Sie gerade Ihre V3-App genommen und erwartet, dass sie mit v4 funktioniert, was keine gute Idee ist.

Ich habe alles versucht, was hier vorgeschlagen wurde, aber für mich nicht funktioniert. Falls ich jemandem mit einem ähnlichen Problem helfen kann, wird nicht jedes einzelne Tutorial, das ich überprüft habe, aktualisiert, um mit Version 4 zu funktionieren.

Hier ist, was ich getan habe, damit es funktioniert

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

Nur so habe ich es geschafft, dass es ohne Fehler oder Warnungen funktioniert.

Wenn Sie Requisiten für mich an Ihre Komponente übergeben möchten, ist dies am einfachsten:

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

Ersetzen

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

Mit

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

Es wird anfangen zu arbeiten. Dies liegt daran, dass React-Router-Dom BrowserRouter exportiert