Tutorial de React Router: Redirigir como un profesional

React Router es la solución de enrutamiento y cambio de página de facto de React. React Router fue uno de los primeros proyectos de código abierto populares centrados en React en 2014 y, junto con React, ha alcanzado un lugar destacado en el ecosistema de React.

En este tutorial del enrutador React, comenzaré con un concepto clave y explicaré mi elección de biblioteca de enrutamiento. Luego describo cómo crear una aplicación simple con suficiente lógica programática para mostrar varias funciones de enrutamiento. Finalmente, me enfoco en implementar un componente elegante, seguro y reutilizable para lograr una solución de enrutamiento mínimamente intrusiva y de bajo mantenimiento. El código de enrutamiento resultante sigue las pautas y el estilo de codificación de React para adaptarse perfectamente a cualquier aplicación React actual.

Primeros pasos: Conceptos básicos del enrutamiento declarativo

El enrutamiento declarativo es el estilo de codificación utilizado en React y React Router. Las rutas declarativas de React son componentes y usan la misma instalación disponible en cualquier aplicación React. Debido a que las rutas son componentes, se benefician de enfoques consistentes.

Estas rutas asocian direcciones web con páginas específicas y otros componentes, y aprovechan el potente motor de renderizado y la lógica condicional de React para activar y desactivar rutas mediante programación. Este enrutamiento condicional nos permite implementar la lógica de la aplicación para garantizar que nuestras rutas sean correctas y estén debidamente protegidas.

Por supuesto, cualquier enrutador es tan bueno como su biblioteca. Muchos desarrolladores no consideran la calidad de vida al elegir una biblioteca, pero React Router v6 ofrece una variedad de funciones poderosas para simplificar las tareas de enrutamiento y debería ser la solución de enrutamiento de React preferida.

¿Qué hace que React Router sea mejor en comparación con otras bibliotecas de enrutamiento?

• Tiene definiciones de rutas declarativas (usando JSX dentro de los componentes de React).
• Es el estándar de la industria.
• Tiene muchos ejemplos de código y una gran cantidad de tutoriales en línea.
• Ofrece convenciones modernas de código React (usando ganchos y componentes funcionales).

Los desarrolladores que utilizan la versión anterior, React Router v5, deben conocer tres cambios importantes en React Router v6:

• Que <Switch> El componente ha sido renombrado <Routes>.
• A useRoutes() gancho reemplazado react-router-config para definir rutas como objetos simples.
• Cada componente hijo de <Routes> debe ser uno <Route>. Esto puede afectar algunos métodos anteriores de organización y composición de rutas.

El resto de este artículo explora varios patrones compatibles con v6 y termina con nuestra última y más elegante composición de ruta. Para obtener más información sobre la actualización de v5 a v6, consulte la guía de migración oficial.

Es hora de configurar una aplicación React básica

Cada gran tutorial de React necesita un chasis simple para mostrar la funcionalidad deseada. Suponemos que tiene npm instalado en su sistema de desarrollo. Vamos a crear un proyecto React simple con Vite (no es necesario instalar Vite por separado) que proporcione nuestra estructura básica de la aplicación React, un servidor web independiente y todas las dependencias necesarias:

npm create vite@latest redirect-app -- --template react-ts

Este comando crea nuestra aplicación base usando TypeScript.

Conceptos básicos de las rutas de reacción

React Router redirige a los usuarios a páginas dentro del cliente según sus direcciones web. La lógica de enrutamiento de una aplicación incluye la lógica general del programa, así como las solicitudes de páginas desconocidas (es decir, redirigir a una página 404).

Debido a que React genera una aplicación de una sola página (SPA), estas rutas simulan aplicaciones web de la vieja escuela con enrutamiento físico o basado en archivos por separado. React garantiza que el usuario final mantenga la ilusión de un sitio web y su colección de páginas mientras conserva los beneficios de los SPA, como las transiciones de página instantáneas. La biblioteca React Router también garantiza que el historial de navegación permanezca accesible y que el botón Atrás siga funcionando.

Proteja su ruta de reacción

React Routes permite el acceso a ciertos componentes con un SPA, proporcionando así información y funcionalidad al usuario final. Queremos que los usuarios solo accedan a las funciones que están autorizadas por los requisitos de nuestro sistema.

Si bien la seguridad es esencial en nuestro cliente React, cualquier implementación segura debe proporcionar características de seguridad adicionales (y posiblemente primarias) en el servidor para proteger contra la mala conducta no autorizada del cliente. Cualquier cosa puede pasar, y los usuarios expertos en navegadores pueden depurar nuestra aplicación a través de las herramientas de desarrollo del navegador. Seguridad primero.

Un buen ejemplo son las funciones de gestión del lado del cliente. Queremos que estas funciones estén protegidas por programas de autenticación y autorización del sistema. Solo debemos permitir que los administradores del sistema accedan al comportamiento potencialmente destructivo del sistema.

La solución simple que no debes elegir

Existe una amplia gama de experiencia dentro de la comunidad de desarrolladores de React. Muchos desarrolladores novatos de React tienden a seguir estilos de codificación menos elegantes en términos de rutas y la lógica de acceso seguro involucrada.

Los atributos típicos de implementación ingenua incluyen:

• Defina la protección de la ruta en cada lado.
• Depender de useEffect Responda ganchos para lograr la redirección de la página cuando se detecta un acceso no autorizado a la página.
• Se debe cargar una página completa antes de que se ejecute la redirección y la lógica de protección de ruta.

Una implementación ingenua de un componente de enrutamiento podría verse así:

import { useContext, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { UserContext } from '../UserContext'

export default function NaiveApproach() {
  const { loggedIn } = useContext(UserContext)
  const navigate = useNavigate()

  useEffect(() => {
    // Check if the user is logged in (after the page loads)
    // If they're not, redirect them to the homepage
    if (!loggedIn) navigate('/access-denied')
  })

  return (
    <div>Page content...</div>
  )
}

Una aplicación usaría este componente de enrutamiento de la siguiente manera:

export default function App() {
  return (
    <Router>
      <Routes>
        {/* Method 1: Using `useEffect()` as a redirect */}
        <Route path="/naive-approach" element={<NaiveApproach />} />
      </Routes>
    </Router>
  )
}

Este enfoque se implementa comúnmente, pero debe evitarse, ya que desperdicia el rendimiento del sistema y molesta a nuestra base de usuarios. El enrutamiento ingenuo hará tres cosas:

1. Afecta negativamente el rendimiento de nuestra aplicación.
   • Misceláneas useEffect Los ganchos posiblemente podrían ejecutarse antes de que ocurra la redirección.
   • Notamos una ralentización del sistema causada por solicitudes innecesarias del lado del servidor. No sería sorprendente una degradación del 75 % o más, según la cantidad de bloques lógicos encontrados antes de ejecutar las comprobaciones de seguridad.
2. Puede causar que el sitio o la página parpadeen.
   • Debido a que la página protegida se carga primero, navega brevemente a la dirección web solicitada, pero puede ser redirigido según la lógica de seguridad de la página.
3. Copie la lógica de enrutamiento seguro en todas partes.
   • Esta implementación de la lógica de enrutamiento en cada página protegida de nuestra aplicación provocaría una pesadilla de mantenimiento.

Mejor enrutamiento de reacción con un componente personalizado

Queremos que nuestro enrutamiento seguro sea más elegante. Tres cosas que nos ayudarán a lograr una mejor implementación son minimizar el mantenimiento del código, centralizar la lógica de enrutamiento seguro para minimizar el impacto del código y mejorar el rendimiento de la aplicación. Implementamos una costumbre ProtectedRoute Componente para lograr estos objetivos:

import { ReactNode } from 'react'
import { Navigate } from 'react-router-dom'

/**
 * Only allows navigation to a route if a condition is met.
 * Otherwise, it redirects to a different specified route.
 */
export default function ConditionalRoute({
  condition,
  redirectTo,
  children,
}: ConditionalRouteProps): JSX.Element {
  return condition ? <>{children}</> : <Navigate to={redirectTo} replace />
}

export type ConditionalRouteProps = {
  /**
   * Route is created if its condition is true.
   * For example, `condition={isLoggedIn}` or `condition={isAdmin}`
   */
  condition: boolean

  /** The route to redirect to if `condition` is false */
  redirectTo: string

  children?: ReactNode
}

Nuestro código de aplicación debe modificarse para aprovechar el nuevo ConditionalRoute Componente:

export default function App() {
  return (
    <Router>
      <Routes>
       {/* Method 2: Using ConditionalRoute (better, but verbose) */}
        <Route
          path="/custom-component"
          element={
            <ConditionalRoute condition={isLoggedIn} redirectTo=”/”>
              <CustomComponentPage />
            </ConditionalRoute>
          }
        />
      </Routes>
    </Router>
  )
}

Esta implementación es significativamente mejor que la solución simple e ingenua descrita anteriormente porque:

• Logre una implementación de enrutamiento seguro en un componente. Esta implementación particionada mejora en gran medida nuestros costos de mantenimiento de la base de código.
• Evita rutas secundarias innecesarias y no autorizadas. Esta lógica de enrutamiento de páginas altamente enfocada evita potencialmente llamadas innecesarias al servidor y lógica de representación de páginas.

Si bien esta implementación es mejor que otras, está lejos de ser perfecta. El estilo de uso que se ve en nuestro ejemplo de código de aplicación tiende a crear más código de lo que nos gustaría y es nuestra motivación para escribir una solución aún más elegante.

La mejor solución de enrutador React

Queremos una implementación verdaderamente épica y de alto nivel que logre el pináculo de la seguridad de ruta altamente basada en componentes, el uso ágil de parámetros y el mínimo impacto en las páginas que requieren enrutamiento. Presentamos nuestro componente elegantemente escrito y menos impactante, el GrandFinaleRoute:

/** A higher-order component with conditional routing logic */
export function withCondition(
  Component: FunctionComponent,
  condition: boolean,
  redirectTo: string
) {
  return function InnerComponent(props: any) {
    return condition ? <Component {...props} /> : <Navigate to={redirectTo} replace />
  }
}

/** A more specific variation */
export const withLoggedIn = (Component: React.FunctionComponent) =>
  withCondition(Component, useContext(UserContext).loggedIn, '/home')

Este componente de enrutamiento seguro no solo satisface todas nuestras necesidades, sino que también permite un uso elegante y limpio sin nuestros componentes secundarios:

const GrandFinaleRoute = withLoggedIn(HigherOrderComponentPage)

export default function App() {
  return (
    <Router>
      <Routes>
        {/* Method 3: Using a higher-order component */}
        {/* (The best of both worlds!) */}
        <Route path="/grand-finale" element={<GrandFinaleRoute />} />
      </Routes>
    </Router>
  )
}

Que GrandFinaleRoute está codificado de forma concisa, ahorra recursos y es de alto rendimiento y, por lo tanto, logra todos nuestros objetivos.

Enrutamiento logrado en respuesta

Las implementaciones de enrutamiento de aplicaciones se pueden codificar de manera ingenua o elegante como cualquier otro código. Hemos explorado los fundamentos del enrutamiento como una exploración completa del código para implementaciones basadas en React Router tanto simples como complejas.

Espero que el enfoque de enrutamiento final satisfaga su deseo de proporcionar una solución de enrutamiento hermosa y de bajo mantenimiento para su aplicación. Independientemente del método, puede evaluar rápidamente la eficacia y la seguridad de su implementación de enrutamiento comparándola con nuestros diversos ejemplos. El enrutamiento en React no tiene que ser una subida cuesta arriba.

El Blog de Ingeniería de Toptal dice gracias marco sanabria por revisar el repositorio y los ejemplos de código presentados en este artículo.

Lectura adicional en el blog de ingeniería de Toptal: