¿Por qué cambiar la palabra clave utilizada en React Router v4?

ReactJS es una biblioteca de JavaScript que se utiliza para crear aplicaciones de una sola página (SPA). Reaccionar de forma predeterminada no proporciona las funciones de enrutamiento. Podemos implementar el enrutamiento en proyectos ReactJS utilizando React Router . React Router es una biblioteca que permite la navegación entre vistas de varios componentes en una aplicación React, permite cambiar la URL del navegador y mantiene la interfaz de usuario sincronizada con la URL. 

En este artículo, veremos cómo funciona el enrutamiento en React Router y cómo podemos aprovechar el componente Switch proporcionado por React Router.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app SWITCH_DEMO_APP

Paso 2: después de crear la carpeta de su proyecto, muévase a ella usando el siguiente comando.

cd SWITCH_DEMO_APP

Paso 3: Después de crear la aplicación React, instale React Router como una dependencia usando el siguiente comando.

npm install --save react-router-dom

Estructura del proyecto: la estructura del proyecto después de eliminar algunos archivos no necesarios se muestra en la imagen que se menciona a continuación.

Estructura del proyecto

Ejemplo 1: Enrutamiento sin el componente Switch: cuando realizamos el enrutamiento con React Router, cada vez que se procesa una página, la ruta de la URL se hace coincidir con cada ruta. Se representan todas las rutas de ruta que coinciden con la ruta URL dada. El contenido del archivo App.js se menciona a continuación. En este archivo, hemos creado cuatro div, cada uno con un componente de enlace proporcionado por React Router. También hemos creado cinco Rutas, es decir, casa, perfil, productos, productos/zapatos, y una Ruta con una ruta igual a un * que es un comodín que coincide con cada ruta URL. 

¿Cómo funciona la coincidencia de rutas en React Router?

El enrutador React toma la URL relativa y la compara con cada ruta proporcionada en el componente Ruta. La coincidencia de ruta se realiza de manera que si una parte de esta URL relativa coincide, entonces se representa esa ruta. Por ejemplo, si la URL relativa es /products/shoes , las rutas / , /products y /products/shoes coinciden con la URL y las tres rutas se representan, pero /profile no coincide con la URL. 

Nombre de archivo: App.js

import React, { Fragment } from "react";
import { BrowserRouter as Router, Link, 
    Route } from "react-router-dom";
  
const Home = () => {
  return <h2>Home</h2>;
};
  
const Profile = () => {
  return <h2>Profile</h2>;
};
  
const Shoes = () => {
  return <h2>Shoes</h2>;
};
  
const Products = () => {
  return <h2>Products</h2>;
};
  
const App = () => {
  return (
    <Fragment>
      <Router>
        <div>
          <Link to="/">Home</Link>
        </div>
        <div>
          <Link to="/products">Products</Link>
        </div>
        <div>
          <Link to="/products/shoes">Shoes</Link>
        </div>
        <div>
          <Link to="/profile">profile</Link>
        </div>
        <Route path="/">
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
        <Route path="/products">
          <Products />
        </Route>
        <Route path="/products/shoes">
          <Shoes />
        </Route>
      </Router>
    </Fragment>
  );
};
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: imagen que muestra la página web cuando hacemos clic en el enlace ‘zapatos’.

Ejemplo 2: Enrutamiento usando el componente Switch: cuando envolvemos nuestras rutas dentro del componente Switch, se asegura de que solo se represente una ruta a la vez. Entonces, en este caso, la primera ruta que coincide con la URL relativa con las rutas de cada componente de ruta y solo representa la primera ruta que coincide con la parte de la URL relativa, como hemos discutido anteriormente. 

Sintaxis: La sintaxis para usar el componente Switch se menciona a continuación.

<Switch>
  <Route exact path='/'>
      <A />
  </Route>
  <Route path='/b'>
      <B />
  </Route>
  <Route exact path='/c'>
      <C />
  </Route>
  <Route path='/d'>
      <D />
  </Route>
</Switch>

Si dos rutas coinciden, entonces podemos usar el apoyo exacto como se muestra a continuación.

<Route exact path='/'>
    <Home />
</Route>

Al usar esta propiedad exacta, nos aseguramos de que la ruta de inicio solo se represente cuando la URL relativa coincida exactamente con / . Ahora, si la URL relativa es /profile , solo se representa la ruta del perfil, sin importar si la ruta del perfil está debajo de /  route en el código. El contenido del archivo App.js cuando usamos el componente Switch se menciona a continuación.

Nombre de archivo: App.js

import React, { Fragment } from 'react';
import { BrowserRouter as Router, 
  Link, Route, Switch } from 'react-router-dom';
  
const Home = () => {
  return <h2>Home</h2>;
};
  
const Profile = () => {
  return <h2>Profile</h2>;
};
  
const Shoes = () => {
  return <h2>Shoes</h2>;
};
  
const Products = () => {
  return <h2>Products</h2>;
};
  
const App = () => {
  return (
    <Fragment>
      <Router>
        <div>
          <Link to='/'>Home</Link>
        </div>
        <div>
          <Link to='/products'>Products</Link>
        </div>
        <div>
          <Link to='/products/shoes'>Shoes</Link>
        </div>
        <div>
          <Link to='/profile'>profile</Link>
        </div>
        <Switch>
          <Route exact path='/'>
            <Home />
          </Route>
          <Route path='/profile'>
            <Profile />
          </Route>
          <Route exact path='/products'>
            <Products />
          </Route>
          <Route path='/products/shoes'>
            <Shoes />
          </Route>
        </Switch>
      </Router>
    </Fragment>
  );
};
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: imagen que muestra la página web cuando hacemos clic en el enlace ‘zapatos’ cuando usamos el componente Cambiar