validar - undefined javascript error

reaccionar enrutador v ^ 4.0.0 Tipo no detectado Error: no se puede leer la propiedad ''ubicación'' de undefined

Question

He estado teniendo algunos problemas con el enrutador de reacción (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'')
);

La 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)

Ah, 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 revisando esto en otros lugares, pero no encontré una manera de resolverlo.

¡Muchísimas gracias por su paciencia y ayuda!

Answer 1

Estás haciendo algunas cosas mal. Primero, browserHistory no es una cosa en V4, así que puedes eliminar eso. En segundo lugar, estás importando todo desde react-router , debería ser react-router-dom . En tercer lugar, react-router-dom no exporta un Router , en su lugar, exporta un BrowserRouter por lo que necesita import { BrowserRouter as Router } from ''react-router-dom . Parece que acabas de tomar tu aplicación V3 y esperar que funcione con v4, lo cual no es una gran idea.

Answer 2

He intentado todo lo sugerido aquí, pero no funcionó para mí. Entonces, en caso de que pueda ayudar a alguien con un problema similar, cada tutorial que he revisado no está actualizado para funcionar con la versión 4.

Esto es lo que he hecho 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 pasar accesorios a su componente para mí, la forma más fácil es esta:

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