Reagieren-Router fehlgeschlagen, prop Geschichte 'ist undefiniert

Habe ich entlang Tyler Mcginnis' tutorial und schlug einen Haken mit dem router reagieren, die sich speziell mit der Geschichte. Ich landete kopiert seinen code verbatim nur um zu sehen, ob es nur mir, aber ich bin noch immer 

Warning: React.createElement: type is invalid -- expected a string (for built-
in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's 
defined in.

Warning: Failed prop type: The prop `history` is marked as required in 
`Router`, but its value is `undefined`. in Router

Uncaught TypeError: Cannot read property 'location' of undefined
at new Router (index_bundle.js:8347)
at index_bundle.js:19079
at measureLifeCyclePerf (index_bundle.js:18859)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (index_bundle.js:19078)
at ReactCompositeComponentWrapper._constructComponent (index_bundle.js:19064)
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:18972)
at Object.mountComponent (index_bundle.js:4070)
at ReactCompositeComponentWrapper.performInitialMount (index_bundle.js:19155)
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:19042)
at Object.mountComponent (index_bundle.js:4070)

Die Umsetzung ist:

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;
var Main = require('../components/Main');
var Home = require("../components/Home");
var PromptContainer = require('../containers/PromptContainer');

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' header='Player One' component={PromptContainer} />
      <Route path='playerTwo/:playerOne' header='Player Two' component={PromptContainer} />
    </Route>
  </Router>
);

module.exports = routes;

Was ich bemerkte, war, dass hashHistory existiert nicht in der react-router Modul, sondern es ist ein createBrowserHistory innerhalb der history Modul. Nach der API-doc, die ich gefunden habe, ich dachte, ich muss es aufrufen durch dort:

var BrowserHistory = require('history/createBrowserHistory);
const history = createBrowserHistory();

Tun, produziert eine createBrowserHistory is not a function Fehler. Entfernen paranthesis, die Ergebnisse in den gleichen oben genannten Fehler angezeigt, die besagt Geschichte ist undefined.

Wenn ich die log-Geschichte, es ist definitiv nicht definiert, das macht mich glauben, das Problem hat zu tun mit der import-Anweisung, aber nicht die Konsole sagen mir ReactRouter.hashHistory konnte nicht gefunden werden?

Verstehe ich dieses tutorial ist ein Jahr alt und es haben sich wohl änderungen an der API, die ich einfach nicht bewusst, und das ist, wo mein Problem liegt. Jede Hilfe ist willkommen!

InformationsquelleAutor der Frage JoeDahle | 2017-03-16

  1. 32

    Router v4 ist ein wenig anders

    HashHistory

    import { HashRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App'; 

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

    oder BrowserHistory

    import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App'; 

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

    InformationsquelleAutor der Antwort Nicholas

  2. 0
    var BrowserHistory = require('history/createBrowserHistory');
const history = createBrowserHistory();

    meinst du var createBrowserHistory = require...?

    auch, es sieht aus wie createBrowserHistory ist jetzt (in v3), die sich an history/lib/createBrowserHistory

    Wenn das nicht funktioniert - welche version von react-router verwenden Sie?

    InformationsquelleAutor der Antwort Tyler Sebastian

Schreibe einen Kommentar