¿Cómo configurar UI Router React?


En  este tutorial vamos aprender cómo configurar ui route react para crear  una aplicación web con varias rutas.

El enrutamiento es un elemento importante cuando se crean aplicaciones web de una sola pagina (single page).

Puedes descargar el repositorio en el siguiente enlace o ver el ejemplo aqui

1.- Crear  aplicación  web en react

Antes de empezar a programar debemos crear nuestra aplicación web en react para esto ejecutamos el siguiente comando o puedes ver la documentación de react en el siguiente enlace.

create-react-app ui-route-react-example

vamos a la carpeta de nuestro proyecto e instalamos UI React Route con el siguiente comando:

sudo yarn add @uirouter/react@0.5.0

2.- Analisis del proyecto

Ya tenemos nuestra aplicación web con react configurada y lista para usar pero aun no hace nada, solo muestra el template por default de react. Lo que debe hacer nuestra aplicación es lo siguiente:

  • Mostrar la ruta “/” (sera el home de nuestra app)  donde debe mostrar lo siguiente:
    • Header
    • contenido de home
    • footer
  • Mostrar la ruta “/about” donde debe mostrar lo siguiente
    • header
    • contenido de about (lorem ipsum)
    • footer

De acuerdo a la descripción debemos crear 4 componentes Home.js, About.js,Header.js y Footer.js

Los componentes Home y About no voy a explicarlos ya que solo contiene solo texto pero puedes ver en el repositorio su contenido.

3.- Esctructura de proyecto

Ya tenemos el analisis del proyeco ahora debemos crear una estructura para tener un estandar de programación vamos a crear la siguiente estructura.

4.- Cómo configurar rutas con ui route

En el archivo App.js vamos añadir el siguiente codigo:

import React, { Component } from 'react';
import { UIRouter,UIView, pushStateLocationPlugin} from '@uirouter/react';
import Home from './screens/home/Home';
import About from './screens/about/About';

const states = [
  {
    name : 'home',
    url  : '/',
    component : Home
  },{
    name : 'about',
    url  : '/about',
    component : About
  }
]

const plugins = [
  pushStateLocationPlugin
];

class App extends Component {
  render() {
    return (
      <UIRouter plugins={plugins} states={states}>
        <UIView />
      </UIRouter>
    );
  }
}

export default App;

¿Pero que hace exactamente este codigo?, primero importamos  react y el componente ui route @uirouter/react, importamos los dos screens que contiene algun texto indicando que estamos en el home y about.

Posteriormente creamos los estados de nuestra aplicación (rutas) y por ultimo hacemos el render  de <UIRoute>

5.- Cómo configurar parent View con UI route

Si analizamos bien este proyecto en ambas vistas home y about se muestra el header y footer asi que lo ideal es crear un parent View que cargue  el Header  y Footer y no tener que importarlo en cada componente.

import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import { UIView } from '@uirouter/react';

class Layout extends Component{
    render(){
        return (
            <div>
                <Header />
                <div className="wrapper">
                    <div className="container">
                        <UIView />
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}

export default Layout;

Como pueden observar importamos el Header, Footer y UiView que se encargar de  hacer el render del View Hijo (UI View Children)

Ahora vamos a importar el componente Layout en las rutas de nuestra app.

import React, { Component } from 'react';
import { UIRouter,UIView, pushStateLocationPlugin} from '@uirouter/react';
import Home from './screens/home/Home';
import About from './screens/about/About';
import Layout from './Layout';

const states = [
  {
    name : 'layout',
    component : Layout
  },
  {
    name : 'layout.home',
    url  : '/',
    component : Home
  },{
    name : 'layout.about',
    url  : '/about',
    component : About
  }
]

const plugins = [
  pushStateLocationPlugin
];

class App extends Component {
  render() {
    return (
      <UIRouter plugins={plugins} states={states}>
        <UIView />
      </UIRouter>
    );
  }
}

export default App;

Como observamos en el codigo creamos otro estado de nuestra app pero sin la url y solo lo nombramos layout, pero en  las rutas home y about en el nombre agreamos lo siguiente ‘layout.home’ y ‘layout.about’ esto indica que tiene una vista padre y primero hace el render del padre y en el  UiView hacer el render el componete hijo, en este caso los componentes Home y About.

Gracias por leer y comentar este post puedes ver el ejemplo en el siguiente enlace o descargar el repositorio aqui

Te dejo de recomendación algunos libros que me ayudaron a mejorar las buenas practicas a la hora de programar.