Una aplicación de página única (SPA) es un sitio web o una aplicación web que reescribe dinámicamente una página web existente con nueva información del servidor web.

En una aplicación React, los componentes recuperan el contenido del sitio y lo representan en un solo archivo HTML en su proyecto.

React Router lo ayuda a navegar hasta el componente de su elección y lo representa en el archivo HTML. Para usarlo, debe saber cómo configurar e integrar React Router con su aplicación React.

Cómo instalar el enrutador React

Para instalar React Router en su proyecto React usando npm, el administrador de paquetes de JavaScript, ejecute el siguiente comando en el directorio de su proyecto:

npm i reaccionar-enrutador-dom

Alternativamente, puede descargar el paquete usando Yarn, un administrador de paquetes que le permite instalar paquetes de biblioteca sin conexión.

Para instalar React Router usando Yarn, ejecute este comando:

agregar hilo reaccionar-router-dom@6

Configuración del enrutador React

Para configurar React Router y hacerlo disponible en su aplicación, importe NavegadorRouter de reaccionar-enrutador-dom dentro de tu índice.js archivo, luego envuelva el componente de su aplicación en el NavegadorRouter elemento:

importar Reaccionar de'reaccionar';
importar ReactDOM de'reaccionar-dom/cliente'; 
importar aplicación de'./Aplicación';
importar { NavegadorRouter } de'reaccionar-enrutador-dom';
constante root = ReactDOM.createRoot( documento.getElementById('raíz') );
root.render(


 </BrowserRouter>
);

Envolviendo el componente de la aplicación en el NavegadorRouter El elemento le da a toda la aplicación acceso completo a las capacidades del enrutador.

Enrutamiento a otros componentes

Después de configurar su enrutador en su aplicación, debe continuar y crear los componentes de su aplicación, enrutarlos y renderizarlos. El siguiente código importa y crea componentes llamados "Inicio", "Acerca de" y "Blog". También importa el Ruta y Rutas elementos de reaccionar-enrutador-dom.

Definirás tus Rutas dentro del aplicación componente:

importar { Rutas, Ruta } de'reaccionar-enrutador-dom';
importar Hogar de'./Hogar';
importar Acerca de de'./Acerca de';
importar Blog de'./Blog';
funciónaplicación() {
devolver (

'/' elemento={ } />
'/acerca de' elemento={ } />
'/Blog' elemento={ }/>
 </Routes>
 )
}
exportarpor defecto aplicación;

El aplicación componente es el componente principal que representa todo el código que ha escrito en sus otros componentes.

El Rutas El elemento es el elemento principal que envuelve las rutas individuales que crea en el componente de su aplicación. El Ruta El elemento crea una sola ruta. Se necesitan dos atributos prop: un camino y un elemento.

El camino El atributo define la ruta URL del componente deseado. La primera ruta en el bloque de código anterior usa una barra invertida (/) como su ruta. Esta es una ruta especial que React renderizará primero, por lo que el Hogar el componente se procesa cuando ejecuta su aplicación. No confunda este sistema con implementando renderizado condicional en sus componentes React. Puedes dar esto camino atribuya cualquier nombre que desee.

El elemento El atributo define el componente que el Ruta rendirá.

El enlace componente es un componente de React Router que se utiliza para navegar por diferentes rutas. Estos componentes acceden a las diversas rutas que ha creado.

Por ejemplo:

importar { Enlace } de'reaccionar-enrutador-dom';
funciónHogar() {
devolver (



'/acerca de'>Acerca de la página</Link>
'/Blog'>página del blog</Link>
Esta es la página principal
 </div>
 )
}
exportarpor defecto Hogar;

El enlace el componente es casi idéntico a la etiqueta de anclaje HTML, solo usa un atributo llamado "to" en lugar de "href". El enlace El componente navega a la ruta con el nombre de ruta correspondiente como su atributo y representa el componente de la ruta.

Enrutamiento anidado y cómo implementarlo

React Router admite el enrutamiento anidado, lo que le permite envolver varias rutas en una sola ruta. Esto se usa principalmente cuando hay alguna similitud en las rutas URL de las Rutas.

Una vez que haya creado los componentes que desea enrutar, desarrollará rutas individuales para cada uno de ellos en el aplicación componente.

Por ejemplo:

importar { Rutas, Ruta } de'reaccionar-enrutador-dom'; 
importar Artículos de'./Artículos';
importar Articulo nuevo de'./Articulo nuevo';
importar artículo uno de'./ArtículoUno';
funciónaplicación() {
devolver (

'/artículo' elemento={ }/>
'/artículo/nuevo' elemento={ }/>
'/Articulo 1' elemento={ }/>
 </Routes>
 )
}
exportarpor defecto aplicación;

El bloque de código anterior importa y enruta los componentes creados Artículos, Articulo nuevo, y artículo uno. Hay algunas similitudes en las rutas URL entre las tres rutas.

El Articulo nuevo El nombre de ruta de la ruta comienza igual que el Artículos Nombre de ruta de la ruta, con una barra invertida (/) y la palabra "nuevo", es decir, (/nuevo). La única diferencia entre los nombres de ruta del Artículos ruta y la artículo uno La ruta es la barra inclinada (/1) al final de la artículo uno ruta de acceso del componente.

Puede anidar las tres Rutas en lugar de dejarlas en su estado actual.

Al igual que:

importar { Rutas, Ruta } de'reaccionar-enrutador-dom';
importar Artículos de'./Artículos';
importar Articulo nuevo de'./Articulo nuevo';
importar artículo uno de'./ArtículoUno';
funciónaplicación() {
devolver (

'/artículo'>
 }/>
'/artículo/nuevo' elemento={ }/>
'/Articulo 1' elemento={ }/>
 </Route>
 </Routes>
 )
}
exportarpor defecto aplicación;

Ha envuelto las tres Rutas individuales en una sola Ruta elemento. Tenga en cuenta que el padre Ruta El elemento solo tiene el camino atributo y no elemento atributo que define el componente a renderizar. El índice atributo en el primer hijo Ruta elemento especifica que este Ruta se procesa cuando navega a la ruta URL del padre Ruta.

Para que su código sea mejor y más fácil de mantener, debe definir sus Rutas en un componente e importarlo en el aplicación componente para su uso.

Por ejemplo:

importar { Rutas, Ruta } de'reaccionar-enrutador-dom';
importar Artículos de'./Artículos';
importar Articulo nuevo de'./Articulo nuevo';
importar artículo uno de'./ArtículoUno';
funciónArtículoRutas() {
devolver (

 }/>
'/artículo/nuevo' elemento={ }/>
'/Articulo 1' elemento={ }/>
 </Routes>
 )
}
exportarpor defecto ArtículoRutas;

El componente del bloque de código anterior contiene las rutas anidadas que antes estaban en el componente de la aplicación. Después de crear el componente, debe importarlo en el aplicación componente y enrutarlo usando un solo Ruta elemento.

Por ejemplo:

importar { Rutas, Ruta } de'reaccionar-enrutador-dom';
importar ArtículoRutas de'./RutasArtículo';
funciónaplicación() {
devolver (

'/artículo/*' elemento={ }>
 </Routes>
 )
}
exportarpor defecto aplicación;

En la final Ruta componente, la barra invertida y los símbolos de asterisco agregados al final del nombre de ruta de la ruta aseguran que el nombre de ruta corresponda a cualquier nombre de ruta que comience con (/artículo).

Hay más para reaccionar enrutador

Ahora debería estar familiarizado con los conceptos básicos de cómo crear aplicaciones de una sola página en React.js, utilizando React Router.

Hay muchas más funciones disponibles en la biblioteca React Router que hacen que la experiencia del desarrollador sea más dinámica al crear aplicaciones web.