Réagir Routeur échec de la prop "l'histoire", n'est pas défini

J'ai suivi tout le long de Tyler Mcginnis tutoriel et a frappé un hic avec la réagir routeur, en particulier avec l'histoire. J'ai fini la copie de son code, mot à mot, juste pour voir si c'est seulement moi, mais je suis encore en train

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)

La mise en œuvre est:

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;

Ce que j'ai remarqué c'est que hashHistory n'existe pas dans la react-router module, il y a plutôt une createBrowserHistory à l'intérieur de la history module. À la suite de la doc API, j'ai trouvé, j'ai pensé que je doit l'appeler par là:

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

Faire qui produit un createBrowserHistory is not a function erreur. Retrait paranthesis, les résultats dans les mêmes erreurs ci-dessus en indiquant l'histoire est undefined.

Lorsque je me connecte histoire, c'est certainement pas défini, ce qui me fait croire que le problème a à voir avec l'instruction d'importation, mais ne serait pas la console me dire ReactRouter.hashHistory n'a pas pu être trouvé?

Je comprends ce tutoriel est d'un an et il y a probablement eu des modifications de l'API, j'ai juste pas au courant, et c'est là que mon problème se trouve. Toute aide est appréciée!

OriginalL'auteur JoeDahle | 2017-03-16

  1. 32

    Routeur v4 est un peu différent

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

    ou 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'));
    Je suis de retour à la v3 pour compléter ce tutoriel, je vais passer à la v4 de l'api, mais il est bon de savoir que ces modifications ont été apportées. Je vais donner la réponse, pour les autres à voir, merci!
    Plusieurs itinéraires de donner d'erreur: "Erreur non Interceptée: A <Routeur> peut avoir qu'un seul élément enfant". Comment résoudre ce problème?
    quelle est la version du routeur? Cela peut vous aider, de recherche où il y a une réponse avec Switch balise dans le routeur.

    OriginalL'auteur Nicholas

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

    voulez-vous dire var createBrowserHistory = require...?

    aussi, il ressemble createBrowserHistory est maintenant (en v3) situé à history/lib/createBrowserHistory

    Si cela ne fonctionne pas - quelle version de react-router utilisez-vous?

    Droit, createbrowserhistory.... Je n'ai pas fait de copier coller la partie. Je suis l'aide de l'histoire de la version 4.6.1, et il n'est pas dans le répertoire /lib soit. Reactrouter est v 4.0.0
    ouais ok v4 cassé un beaucoup de choses. Si vous êtes à la suite d'un guide il y a un an, j'avais utilisation v3.
    Il est v4 qui casse tout, je revint à la v3.0.2, et tout fonctionne comme espéré, merci!

    OriginalL'auteur Tyler Sebastian