réagir routeur v^4.0.0 Uncaught TypeError: Cannot read property 'emplacement' undefined

J'ai eu un peu de difficulté à réagir routeur (j'utilise la version^4.0.0).

c'est mon 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')
);

l'App.js est juste n'importe quoi. je poste le service de base ici, parce qu'il n'est pas le problème (je crois)

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;

et c'est ce qui arrive lorsque je vérifie le journal de la console

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, et c'est le package.json juste au cas où

{
  "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"
  }
}

j'ai été vérifier cela sur d'autres endroits, mais je n'ai pas trouver un moyen de les résoudre.

Merci beaucoup les gars pour votre patience et votre aide!!

OriginalL'auteur Lucas fersa | 2017-03-19

64

Vous êtes en train de faire quelques choses de mal. Tout d'abord, browserHistory n'est pas une chose en V4, de sorte que vous pouvez le retirer. Deuxièmement, vous êtes l'importation de tout, de react-router, il devrait être react-router-dom. Troisièmement, react-router-dom ne pas exporter un Router, au lieu de cela, elle exporte une BrowserRouter si vous avez besoin de import { BrowserRouter as Router } from 'react-router-dom. Ressemble que vous venez de prendre votre V3 app et prévu pour fonctionner avec la v4, ce qui n'est pas une bonne idée.

C'est un peu le cas haha. j'ai été d'apprendre à partir d'un cours en Udemy, et il V3. J'ai essayé, n'est-ce pas le travail. Je l'ai regardé d'une certaine façon de l'utiliser dans la V4, mais tout ce que je pouvais trouver était des gens qui me disent de dowgrade. voilà comment j'ai atterri ici. De toute façon, merci beaucoup pour votre aide. J'ai Vraiment l'apprécier 😀
Hey Tyler, avez-vous un exemple de code pour la même?
J'ai la même erreur dans réagissent-routeur 4.1.1 après avoir suivi ces étapes. Dois-je créer une histoire de l'objet par moi-même?
Merci man! en lisant votre réponse, je l'ai découvert j'ai eu l'erreur due à la réaction-routeur version. Puisque je ne pouvais pas trouver une bonne documentation pour la v4, j'ai décidé de passer à la V3, et puis il a commencé à travailler pour moi comme je le voulais
ne pas exporter un Routeur" github.com/ReactTraining/react-router/blob/... réagissent-routeur-dom est de lancer cet avertissement qui dit d'utiliser Router.

OriginalL'auteur Tyler McGinnis

J'ai essayé tout ce qui est suggéré ici, mais ne fonctionne pas pour moi. Donc si je peux aider quelqu'un avec un problème similaire, chaque tutoriel, je l'ai vérifié n'est pas mis à jour pour fonctionner avec la version 4.

Voici ce que j'ai fait pour le faire fonctionner

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

C'est le seul moyen que j'ai réussi à le faire fonctionner sans erreurs ou des avertissements.

Dans le cas où vous souhaitez passer les accessoires pour votre composant pour moi la façon la plus simple est celle-ci:

 <Route path="/" render={()=><App items={temasArray}/>}/>

OriginalL'auteur Lancelot

Vous devez vous connecter pour publier un commentaire.