ReactJS | Tipos de enrutadores

Sobre la base de la parte de la URL que utilizará el enrutador para rastrear el contenido que el usuario intenta ver, React Router proporciona tres tipos diferentes de enrutadores: 

• Enrutador de memoria
• Enrutador del navegador
• Enrutador hash

Requisito previo: antes de comenzar este artículo, debe tener conocimientos básicos de React Router .
Enrutador de memoria: el enrutador de memoria mantiene los cambios de URL en la memoria, no en los navegadores de los usuarios. Mantiene el historial de la URL en la memoria (no lee ni escribe en la barra de direcciones, por lo que el usuario no puede usar el botón Atrás del navegador ni el botón Adelante). No cambia la URL en su navegador. Es muy útil para pruebas y entornos sin navegador como React Native.
 

• Sintaxis: 

import { MemoryRouter as Router } from 'react-router-dom';

• Programa: 

import React, { Component } from 'react';
import { MemoryRouter as Router, Route, Link, Switch }
                    from 'react-router-dom';
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
  
class App extends Component {
  render() {
      return (
        <Router>
            <div className="App">
                <ul className="App-header">
                  <li>
                      <Link to="/">Home</Link>
                  </li>
                  <li>
                      <Link to="/about">
                        About Us
                      </Link>
                  </li>
                  <li>
                      <Link to="/contact">
                        Contact Us
                      </Link>
                  </li>
                </ul>
                <Switch>
                  <Route exact path='/'
                      component={Home}>
                  </Route>
                  <Route exact path='/about'
                      component={About}>
                  </Route>
                  <Route exact path='/contact'
                      component={Contact}>
                  </Route>
                </Switch>
            </div>
        </Router>
    );
  }
}
  
export default App;

• Producción: 

Enrutador del navegador: utiliza la API de historial de HTML 5 (es decir, la API pushState, replaceState y popState) para mantener su interfaz de usuario sincronizada con la URL. Enruta como una URL normal en el navegador y asume que el servidor está manejando todas las URL de solicitud (p. ej., /, /about) y apunta a la raíz index.html. Acepta accesorios forceRefresh para admitir navegadores heredados que no admiten la API pushState de HTML 5
 

• Sintaxis: 

import { BrowserRouter as Router } from 'react-router-dom';

• Programa: 

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch }
                  from 'react-router-dom';
 
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
  
class App extends Component {
  render() {
      return (
        <Router>
            <div className="App">
                <ul className="App-header">
                  <li>
                      <Link to="/">Home</Link>
                  </li>
                  <li>
                      <Link to="/about">About Us</Link>
                  </li>
                  <li>
                      <Link to="/contact">
                        Contact Us
                      </Link>
                  </li>
                </ul>
                <Switch>
                  <Route exact path='/'
                      component={Home}>
                  </Route>
                  <Route exact path='/about'
                      component={About}>
                  </Route>
                  <Route exact path='/contact'
                      component={Contact}>
                  </Route>
                </Switch>
            </div>
        </Router>
    );
  }
}
  
export default App;

• Producción: 

Enrutador hash: el enrutador hash utiliza enrutamiento hash del lado del cliente. Utiliza la parte hash de la URL (es decir, ventana.ubicación.hash) para mantener su interfaz de usuario sincronizada con la URL. El servidor no manejará la parte hash de la URL, el servidor siempre enviará el index.html para cada solicitud e ignorará el valor hash. No necesita ninguna configuración en el servidor para manejar rutas. Se utiliza para admitir navegadores heredados que generalmente no admiten la API HTML pushState. Es muy útil para los navegadores heredados o si no tiene una lógica de servidor para manejar el lado del cliente. No se recomienda que el equipo de react-router-dom utilice esta ruta.
 

• Sintaxis: 

import { HashRouter as Router } from 'react-router-dom';

• Programa: 

import React, { Component } from 'react';
import { HashRouter as Router, Route, Link, Switch }
              from 'react-router-dom';
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
  
class App extends Component {
  render() {
      return (
        <Router>
            <div className="App">
                <ul className="App-header">
                  <li>
                      <Link to="/">Home</Link>
                  </li>
                  <li>
                      <Link to="/about">About Us</Link>
                  </li>
                  <li>
                      <Link to="/contact">
                          Contact Us
                      </Link>
                  </li>
                </ul>
                <Switch>
                  <Route exact path='/'
                      component={Home}>
                  </Route>
                  <Route exact path='/about'
                      component={About}>
                  </Route>
                  <Route exact path='/contact'
                      component={Contact}>
                  </Route>
                </Switch>
            </div>
        </Router>
    );
  }
}
  
export default App;

• Sintaxis: