He tenido 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') );App.js es cualquier cosa. Estoy publicando el básico aquí, porque ese 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 paquete.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é la manera de resolverlo.
Muchas gracias chicos por vuestra paciencia y ayuda!!
Estás haciendo algunas cosas mal.
Primero, browserHistory no es una cosa en V4, por lo que puede eliminarlo.
En segundo lugar, está importando todo desde react-router , debería ser react-router-dom .
En tercer lugar, react-router-dom no exporta un Router , en cambio, exporta un BrowserRouter , por lo que debe import { BrowserRouter as Router } from 'react-router-dom .
Parece que tomó su aplicación V3 y esperaba que funcionara con v4, lo cual no es una gran idea.
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
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 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}/>}/>