web-dev-qa-db-fra.com

react router v ^ 4.0.0 Uncaught TypeError: Impossible de lire la propriété 'location' de non définie

J'ai eu quelques problèmes avec le routeur de réaction (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')
);

le App.js est juste n'importe quoi. Je publie la base ici, parce que ce 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 se passe quand 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 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 vérifié cela ailleurs, mais je n'ai pas trouvé le moyen de le résoudre.

Merci beaucoup pour votre patience et votre aide !!

javascriptjsonreactjsreact-router
40
Lucas fersa

Vous faites certaines choses mal.

  1. Tout d'abord, browserHistory n'est pas une chose dans la V4, vous pouvez donc le supprimer.

  2. Deuxièmement, vous importez tout de react-router, il devrait s'agir de react-router-dom.

  3. Troisièmement, react-router-dom n'exporte pas Router, mais plutôt BrowserRouter. Vous devez donc import { BrowserRouter as Router } from 'react-router-dom.

On dirait que vous venez de prendre votre application V3 et que vous vous attendiez à ce qu'elle fonctionne avec v4, ce qui n'est pas une bonne idée.

113
Tyler McGinnis

J'ai tout essayé, mais cela n'a pas fonctionné pour moi. Donc, si je peux aider quelqu'un avec un problème similaire, chaque tutoriel que j'ai vérifié n'est pas mis à jour pour fonctionner avec la version 4.

Voici ce que j'ai fait pour que ça marche

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 la seule façon pour moi de faire en sorte que cela fonctionne sans erreurs ni avertissements.

Si vous souhaitez transmettre des accessoires à votre composant, le plus simple est celui-ci:

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