Creación de Rutas con ReactRouter

Clase 28 de 33 • Curso Profesional de React.js 2017

Juan Carlos Ruiz González

student•

Les comparto mi repositorio con los cambios necesarios para hacerlo funcionar al 2 de enero de 2016 https://github.com/JuanCrg90/React-Router-Example me baso en el ejemplo provisto por gon250 , le he agregado los presets de babel que ahora son necesarios para usar ES2015 y React

Javier Ruiz Vázquez

student•

Código actualizado

{  
  "name": "rutas",  
  "dependencies": {  
    "babel-preset-es2015": "^6.5.0",  
    "babel-preset-react": "^6.5.0",  
    "babelify": "^7.2.0",  
    "browserify": "^13.0.0",  
    "react": "^0.14.7",  
    "react-dom": "^0.14.7",  
    "react-router": "^2.0.0"  
  },  
  "scripts": {  
    "build": "browserify -t [babelify --presets [es2015 react] ] app.js > build.js"  
  }  
}

app.js

/*  
* Module Dependencies  
*/  
  
import React from 'react';  
import ReactDOM from 'react-dom';  
import { Router, Route, Link, hashHistory } from 'react-router';  
  
class App extends React.Component {  
  render() {  
    return <div>  
      <h1>App</h1>  
      <ul>  
        <li><Link to="/user">User</Link></li>  
        <li><Link to="/about">About</Link></li>  
      </ul>  
      {this.props.children}  
    </div>;  
  }  
}  
  
class About extends React.Component {  
  render() {  
    return <p>About View </p>;  
  }  
}  
  
class User extends React.Component {  
  render() {  
    return <p>User View </p>;  
  }  
}  
  
const routes = <Router history={hashHistory}>  
  <Route path="/" component = {App} >  
    <Route path="about" component = {About} />  
    <Route path="user" component = {User} />  
  </Route>  
</Router>;  
  
ReactDOM.render(routes, document.getElementById('container'));

Guillermo Mansilla

student•

React-router component para hacer rutas de clientes o server side. Permite hacer isomorfica la app, manejar rutas de clients y server side dentro del mismo archivo.

Gonzalo Barba

student•

Hola, comentaros que a fecha de hoy este video esta utilizando cosas que ya no estan en practica, por lo que si realizaes este tutorial o una instalar el mismo paquete de npm de react-router o si quereis utilizar la ultima version como yo teneis que tener cuidado ya que como dicen en un comentario en el codigo RouteHandler168 ya no se utiliza.(### RouteHandler168
169RouteHandler is gone. Router now automatically populates170this.props.children of your components based on the active route.)

import React from 'react';  
import { Router, Route, Link } from 'react-router'  
  
class App extends React.Component {    
render(){      
return <div>        <h1>App</h1>        <ul>          <li><Link to="/user">User</Link></li>          <li><Link to="/about">about</Link></li>        </ul>        {this.props.children}      </div>  }}  
class About extends React.Component{  render(){    return <p>You are in About View</p>  }}  
  
class User extends React.Component{  render(){    return <p>You are in User View</p>  }}  
let routes = <Router>      <Route path="/" component={App}>        <Route path="about" component={About} />        <Route path="user" component={User} />      </Route>    </Router>  
React.render(routes, document.getElementById('container'));

Gonzalo Barba

student•

No me deja editar el comentario que he escrito que se ha realizado el submit accidental mente, os dejo el codigo funcionando de como se utilizarian las libretias a dia de hoy con el package.json para que tengais de referencia las versiones que he utilizado de cada dependencia. https://gist.github.com/gon250/52f62bc153f8e4e42fa3

Angel M. Cereijo Martinez

student•

El código que funciona actualmente ha cambiado bastante con respecto al mostrado en el vídeo. Tanto el package.json como el app.js

El package.json:
{
"name": "ejemplo-router",
"dependencies": {
"babel-cli": "^6.4.5",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^2.0.0-rc5"
},
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13"
},
"scripts": {
"build": "browserify -t [ babelify --presets [ es2015 react ] ] app.js > build.js"
},
"babel": {
"presets": [
"es2015"
]
}
}

El app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { default as Router, Route, hashHistory, Link } from 'react-router';

const RouteHandler = Router.RouteHandler;

class App extends React.Component {
render() {
return <div>
<h1> App </h1>
<Link to="/user">User</Link>
<Link to="/about">About</Link>
{this.props.children}
</div>
}
}

class About extends React.Component {
render() {
return <p> About page </p>
}
}

class User extends React.Component {
render() { console.log('User');
return <p> User page </p>
}
}

const routes = <Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="user" component={User} />
<Route path="about" component={About} />
</Route>
</Router>

ReactDOM.render(routes, document.getElementById('container'));

Jairo Morales Morales Dl Torre

student•

Como puedo enviar valores <a href="#money"> Moneda </a> hacia el componenete receptor.

José María Carro López

student•

a dónde se fue la discusión?