Reagieren-router TypeError: _diese.Requisiten.die Geschichte ist nicht definiert

Ich bin mit reagieren-router mit reagieren js und ich nach Ihrer Dokumentation aber vor diesem Fehler

beim kompilieren zeigt es den Fehler,

TypeError: _this.props.history is undefined

dies ist mein index.js Datei

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

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

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

- und das ist meine App.js Datei

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

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            headerText: "Props from Header.",
            contentText: "Props from content."
        };
    }
    render() {
        return (
          <div className="App">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
          </div>
        );
    }
}

export default App;
  • Von wo aus hast du es nennen?
  • Ich Verwendete Router in index.js Datei, und Sie können sehen, aus dem code.
InformationsquelleAutor Manzurul Hoque Rumi | 2017-03-17
  1. 16

    Dies ist, weil die Dinge verändert, Reagieren die Router ab 4.0.0. Sollten Sie nun verwenden BrowserRouter aus react-router-dom - Paket, wenn Sie wurden mit browserHistory. Also dein code sieht wie folgt aus:

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

ReactDOM.render(
    <BrowserRouter>
        <Route path="/" component={ App }/>
    </BrowserRouter>, document.getElementById('root')
);

    Natürlich, müssen Sie die Installation react-router-dom ersten.

    Beachten Sie auch, dass, wenn Sie mit mehr als einem Route element, müssen Sie eine Switch wie erklärt in dieser Antwort.

    InformationsquelleAutor Guillaume
  2. 6

    Sind Sie mit npm? Ich hatte das gleiche problem mit "reagieren-router": "^4.0.0" in meinem Paket.json. Ändern Sie ihn auf "reagieren-router": "^3.0.2" mein problem gelöst.

    • "reagieren-router": "^3.0.2" funktioniert für mich. Aber verstehe nicht, warum 4.0.0 funktioniert nicht.
    • Ich auch) ich habe gerade im Vergleich mit meinen letzten arbeiten-Paket.json.
    • kein gutes Zeichen, wenn Sie Folgen Sie den offiziellen tutorial und die Lektion 1 nicht funktioniert :>
    InformationsquelleAutor Andrew Pelykh
  3. 1

    Den unten Lösung funktioniert bei mir in ReactDOM.render: 

     <BrowserRouter>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/user" component={User} />
    <Route path="*" component={page404} />
  </Switch>
 </BrowserRouter>

    Es mehrere Routing.

    InformationsquelleAutor Amir Shabani
  4. 1

    Es scheint mir, dass diese.Requisiten.die Geschichte ist nicht definiert, da Sie nicht durch die routeProps zu der Komponente, die Sie Rendern möchten.

    Ändern Ihre Routen wie folgt: 

     <Route path="/home" render={(routeProps) => <Home {...routeProps}/>} />

    Du kannst auch andere Requisiten, die auf das gerenderte Komponenten mit dieser Methode.

    • Diese gerade gespeichert haben mir eine Menge Mühe nach der Suche nach Stunden. Vielen Dank.
    • gerne 🙂
    InformationsquelleAutor Ramiro Farto
  5. 0

    Ich auf dieses problem, wenn zu instanziieren versucht, meinen eigenen Router lieber als die eingebauten, sich mit ein Problem ist der Zugang zu der Geschichte:

    history.js

    import { createHashHistory as createHistory } from 'history'

export default createHistory()

    root.jsx

    import { Router, Route } from 'react-router-dom'
import history from './history'

...

  <Router history={history}>
    <Route path="/test" component={Test}/>
  </Router>

    In meinem Fall, das Problem war, dass ich hatte eine version des history Paket gesperrt-v2.1.2, während react-router wurde je ein v4.x-version von history im eigenen Abhängigkeiten. Also das built-in-Router instanziiert gut mit den neueren history, aber wenn ich versuchte, es selbst zu tun, ich zog in die ältere history und immer ein inkompatibles Objekt.

    InformationsquelleAutor Ian Greenleaf Young
Schreibe einen Kommentar