Añadiendo rutas

Añadiendo rutas a nuestra app en React

Para que nuestra app tenga una mejor funcionalidad debemos incorporar e instalar un sistema que nos proporcione diferentes rutas en nuestra app. Para realizar dicha tarea debemos instalar una herramienta llamada react router dom. Toda la documentación detallada la podemos encontrar aquí.

El primer paso es instalar la herramienta (ejecutamos en la terminal) :

cd my-app
npm install --save react-router-dom

El siguiente paso es modificar nuestro archivo index.js ubicado en la carpeta src de nuestra app. En dicho archivo añadimos lo siguiente:

import './index.css';  
import App from './App';  
import registerServiceWorker from './registerServiceWorker';  
//  Importamos lo necesario para react router dom  
import {BrowserRouter} from 'react-router-dom';  
  
// Encapsulamos nuestro componente principal en Browser Router  
const WithRouter = () => (  
 <BrowserRouter>  
    <App/>  
 </BrowserRouter>  
);  

// Renderizamos a nuestro nuevo componente withRouter 
ReactDOM.render(<WithRouter/>, document.getElementById('root'));  
registerServiceWorker();

El siguiente paso es crear un archivo nuevo dentro de la carpeta src llamado Routes.js. Nuestro archivo debe contener lo siguiente:

import React from "react";  
import {Switch, Route} from 'react-router-dom';  
// importamos nuestros componentes  
import HomePage from './HomePage/HomeContainer';  
  
// creamos un componente de presentación llamado Routes  
export const Routes = () => (  
    // Encapsulamos nuestras rutas en Switch de react router dom  
    <Switch>  
       {/\* Creamos nuestras rutas */}  
       <Route exact path="/" component={HomePage} />  
       {/\* Aquí van más rutas */}  
   </Switch>  
);

Para finalizar con nuestra configuración y para que las rutas sean renderizadas debemos importar nuestras rutas en el archivo App.js.

import React, { Component } from 'react';  
import './App.css';  
// importamos nuestras rutas que creamos en el archivo Routes.js  
import {Routes} from './Routes';  
  
class App extends Component {  
    render() {  
        return (  
            <div className="App">  
                {/\* Renderizamos las rutas */}  
                <Routes/>  
            </div>  
        ); 
    }
}  
  
export default App;

Añadiendo rutas a nuestra app de React Mostrando Añadiendo rutas a nuestra app de React.