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.