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 !!
fuente
Router
.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}/>}/>
fuente
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
fuente