Nov. 4, 2016
Como usar react-router para crear rutas en react
En este tutorial aprenderemos a usar react-router para crear rutas en nuestra app de react.
Instalando dependencias
Ejecutamos:
npm init -y
npm install --save history react react-dom react-router
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server
configuramos el webpack.config.js:
var path = require("path")
module.exports = {
entry: {
main: path.join(__dirname, "app/js")
},
output: {
filename: "[name].js",
path: path.join(__dirname, "dist")
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["es2015", "react"]
}
}
]
},
resolve: {
root: path.join(__dirname, "app/js"),
extensions: ["", ".js"],
moduleDirectories: ["node_modules"]
},
debug: true,
devtool: "source-map",
devServer: {
contentbase: path.join(__dirname, "dist")
}
}
y creamos una carpeta llamada app y adentro de esta una llamada js, aquí estarán los componentes que usaremos, con react router cada componente cuenta como ruta y es tomado como una pagina completa.
Creando los componentes
Index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router'
import Home from 'home'
import About from 'about'
import Posts from 'posts'
import Post from 'post'
class App extends React.Component {
render() {
return(
<div>
<ul>
<li><Link to="/" >Home </Link></li>
<li><Link to="/about" >About</Link></li>
<li><Link to="/posts" >Posts</Link></li>
</ul>
{ this.props.children }
</div>
)
}
}
render((
<Router history={browserHistory} >
<Route path="/" component={App} >
<IndexRoute component={Home} />
<Route path="about" component={About}/>
<Route path="posts" component={Posts}>
<Route path=":id" component={Post}/>
</Route>
</Route>
</Router>
), document.querySelector("#main"))
Importamos las librerías necesarias y los componentes de las paginas (aun no creados), el componente principal se llama app, este componente es el que se compartirá entre todas las paginas y es por eso que aquí podemos los links, react-router trae en componente llamado Link
este recibe la ruta a la cual accederá, es importante poner { this.props.children }
para que los componentes hijos (los de las diferentes rutas) puedan aparecer, si queremos hacer render del componente necesitamos el componente Router de react-router:
render((
<Router history={browserHistory} > //Router indica que esta app funcionara con react-router
<Route path="/" component={App} > // indicamos la ruta principal "/"
//y el componente que se compartirá entre todas las paginas
<IndexRoute component={Home} /> //indicamos que componente se mostrara al entrar en "/"
<Route path="about" component={About}/> //creamos paginas indicando el path //y el componente que se mostrara
<Route path="posts" component={Posts}>
<Route path=":id" component={Post}/> //podemos anidar componentes que se relacionen entre si
//esta ruta quedaría de la forma "posts/:id"
</Route>
</Route>
</Router>
), document.querySelector("#main"))
About.js
import React from 'react'
const About = () => (
<div>
<p>Pagina Sobre Nosotros.</p>
</div>
)
export default About;
Home.js
import React from 'react'
const Home = () => (
<div>
<p>Bienvenido a la pagina principal.</p>
</div>
)
export default Home;
Estos dos componentes son sencillos, solo para mostrar información.
Post.js
import React from 'react'
export default class Post extends React.Component {
constructor(props) {
super(props)
this.state = {
param: ""
}
}
componentDidMount() {
var id = this.props.params.id
this.setState({param: id})
}
render() {
return (
<div>
<p>Parametro: { this.state.param } </p>
</div>
)
}
}
Este componente espera recibir un parámetro llamado id y posteriormente se encarga de mostrarlo.
Posts.js
import React from 'react'
export default class Posts extends React.Component {
render() {
return (
<div>
<p>Lista de los posts</p>
</div>
)
}
}
Este componente contiene la lista posts creados.
Ejecutando el proyecto
Necesitamos crear una carpeta llamada dist, donde crearemos un html, index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="main"></div>
<script src="./main.js"></script>
</body>
</html>
Este html importa el script compilado con todo el código y necesita un div para indicar donde los componentes se mostraran.