web-dev-qa-db-fra.com

Le routeur React a échoué dans l'historique des prop, n'est pas défini

J'ai suivi le tutoriel de Tyler Mcginnis et rencontré un problème avec le routeur de réaction, en particulier avec l'historique. J'ai fini par copier son code mot à mot juste pour voir si c'était seulement moi, mais je suis toujours en train de 

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 le module react-router, mais il y a plutôt une createBrowserHistory à l'intérieur du module history. Suite à la documentation API que j'ai trouvée, je me suis dit que je devais l'appeler par là en tant que:

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

Cela produit une erreur createBrowserHistory is not a function. Si vous supprimez la parenthèse, les erreurs suivantes sont générées, indiquant que l'historique est undefined.

Lorsque je me connecte à l'historique, il est définitivement indéfini, ce qui me fait penser que le problème a trait à l'instruction d'importation, mais la console ne peut-elle pas me dire que ReactRouter.hashHistory est introuvable?

Je comprends que ce didacticiel date d'un an et que des modifications de l'API dont je ne suis tout simplement pas au courant ont probablement été apportées, et c'est là que réside mon problème. Toute aide est appréciée!

reactjsreact-router
13
JoeDahle

Le 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'));
32
Nicholas
var BrowserHistory = require('history/createBrowserHistory');
const history = createBrowserHistory();

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

aussi, il semble que createBrowserHistory est maintenant (dans v3) situé à history/lib/createBrowserHistory

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

0
Tyler Sebastian