Para crear aplicaciones en React que estén compuestas de varias pantallas necesitamos un enrutador.
Un enrutador nos permite relacionar URL's con componentes.
React no incluye un enrutador pero podemos utilizar una liberaría llamada react-router.
El primer paso para utilizar react-router es instalar la librería.
Con npm:
$ npm install --save react-router
Con Yarn:
$ yarn add react-router
Para utilizar react-router en tu proyecto primero debes importarlo y utilizar los componentes Router
, Route
para definir las rutas:
import React, { Component } from 'react';import { Router, Route, browserHistory } from 'react-router';...class App extends Component {render() {return (<Router history={browserHistory}><Route path="/" component={Home} /><Route path="about" component={About} /></Router>);}}
En este caso, cuando ingresen a la raíz de nuestro proyecto (/
) se renderizará el componente Home
y cuando ingresen a /about
se renderizará el componente About
.
Para definir template que sea común a varias pantallas de nuestra aplicación puedes crear rutas anidadas de la siguiente forma:
render() {return (<Router history={browserHistory}><Route path="/" component={Template}><IndexRoute component={Home} /><Route path="about" component={About} /></Route></Router>);}
Lo primero es definir una ruta que va a definir el template y rutas anidadas que van a utilizar ese template. En este caso nuestro template va a ser definido por un componente llamado Template
.
El componente IndexRoute
se utiliza para definir el componente que se va a utilizar cuando alguien ingrese al path definido en la padre (en este caso a la raíz del proyecto /
).
El componente Template
se definiría de la siguiente forma:
class Template extends Component {render() {return (<div><h1>Mi Super Aplicación</h1>{this.props.children}</div>);}}
Cada componente como Home
y About
se va a renderizar en la línea {this.props.children}
. El <h1>
aparecerá en todas las páginas.
Para crear links a las diferentes rutas de tu aplicación sin refrescar la página vas a utilizar otro componente de react-router llamado Link
que puedes utilizar de la siguiente forma:
<Link to=“/”>Ir al Index</Link><Link to=“about”>Ir al About</Link>