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

85

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!

Lucas Fersa
quelle

Antworten:

221

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.

Tyler McGinnis
quelle
3
Das ist irgendwie der Fall, haha. Ich habe aus einem Kurs in Udemy gelernt und er hat V3 verwendet. Ich habe das versucht, hat nicht funktioniert. Ich habe nach einer Möglichkeit gesucht, es in V4 zu verwenden, aber alles, was ich finden konnte, waren Leute, die mir sagten, ich solle absteigen. So bin ich hier gelandet. Wie auch immer, vielen Dank für Ihre Hilfe. Ich weiß es wirklich zu schätzen: D
Lucas Fersa
Hey Tyler, hast du einen Beispielcode dafür?
MohammedAshrafali
Ich habe den gleichen Fehler im React-Router in 4.1.1, nachdem ich diese Schritte ausgeführt habe. Muss ich selbst ein Verlaufsobjekt erstellen?
PDN
1
Danke, Mann! Beim Lesen Ihrer Antwort stellte ich fest, dass ich aufgrund der React-Router-Version einen Fehler hatte. Da ich keine gute Dokumentation für die v4 finden konnte, entschied ich mich für ein Downgrade auf V3 und dann fing es an, für mich zu funktionieren, wie ich wollte
sergioviniciuss
@TylerMcGinnis "React-Router-Dom exportiert keinen Router" github.com/ReactTraining/react-router/blob/… React-Router-Dom gibt diese Warnung aus, die besagt, dass verwendet werden soll Router.
Corysimmons
6

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}/>}/>
Lancelot
quelle
Ich habe eine ähnliche Einrichtung, aber auf meiner Zielseite wird meine erste Komponente angezeigt, ohne jemals auf den Menülink zu klicken. Ich werde eine Frage
posten
3

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

Ajay Poriya
quelle
Ersetzt React-Router-Dom React-Router oder müssen beide installiert sein?
JohnnyBizzle
Nur
React