reaccionar router v ^ 4.0.0 Uncaught TypeError: No se puede leer la propiedad 'ubicación' de indefinido

85

He tenido algunos problemas con el enrutador react (estoy usando la versión ^ 4.0.0).

este es mi 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')
);

App.js es cualquier cosa. Estoy publicando el básico aquí, porque no es el problema (creo)

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;

y esto es lo que sucede cuando reviso el registro de la consola

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, y este es el package.json por si acaso

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

He estado comprobando esto en otros lugares, pero no encontré la manera de resolverlo.

¡¡Muchas gracias chicos por su paciencia y ayuda !!

Lucas fersa
fuente

Respuestas:

221

Estás haciendo algunas cosas mal.

  1. Primero, browserHistory no es una cosa en V4, por lo que puede eliminar eso.

  2. En segundo lugar, está importando todo de react-router, debería ser react-router-dom.

  3. En tercer lugar, react-router-domno exporta a Router, sino que exporta a, BrowserRouterpor lo que es necesario import { BrowserRouter as Router } from 'react-router-dom.

Parece que acaba de tomar su aplicación V3 y esperaba que funcionara con v4, lo cual no es una gran idea.

Tyler McGinnis
fuente
3
Ese es un poco el caso jaja. Estaba aprendiendo de un curso en Udemy y usé V3. Intenté eso, no funcionó. Busqué alguna forma de usarlo en V4, pero todo lo que pude encontrar fue gente que me decía que bajara la calificación. así es como terminé aquí. De todos modos, muchas gracias por tu ayuda. Realmente lo aprecio: D
Lucas fersa
Hola Tyler, ¿tienes algún código de muestra para el mismo?
MohammedAshrafali
Tengo el mismo error en react-router en 4.1.1 después de seguir estos pasos. ¿Necesito crear un objeto de historial yo mismo?
PDN
1
¡Gracias hombre! Al leer su respuesta, descubrí que estaba teniendo el error debido a la versión react-router. Como no pude encontrar una buena documentación para la v4, decidí cambiar a V3 y luego comenzó a funcionar para mí como quería
sergioviniciuss
@TylerMcGinnis "react-router-dom no exporta un enrutador" github.com/ReactTraining/react-router/blob/… react-router-dom está lanzando esta advertencia que dice usar Router.
corysimmons
6

Probé todo lo sugerido aquí pero no funcionó para mí. Entonces, en caso de que pueda ayudar a alguien con un problema similar, todos los tutoriales que he revisado no están actualizados para funcionar con la versión 4.

Esto es lo que hice para que funcione

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

Esa es la única forma en que he logrado que funcione sin errores ni advertencias.

En caso de que quiera pasarme accesorios a su componente, la forma más fácil es esta:

 <Route path="/" render={()=><App items={temasArray}/>}/>
Lancelot
fuente
Tengo una configuración similar, pero en mi página de destino aparece mi primer componente sin hacer clic en el enlace del menú. Publicaré una pregunta Gracias
Si8
3

Reemplazar

import { Router, Route, Link, browserHistory } from 'react-router';

Con

import { BrowserRouter as Router, Route } from 'react-router-dom';

Empezará a funcionar. Es porque react-router-dom exporta BrowserRouter

Ajay Poriya
fuente
¿React-router-dom reemplaza react-router o necesita ambos instalados?
JohnnyBizzle
Solo mantenga react-router-dom
Ajay Poriya