Cómo construir una aplicación de una sola página usando React Router
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 react-router-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:
yarn add react-router-dom@6
Configuración del enrutador React
Para configurar React Router y hacerlo disponible en su aplicación, importe BrowserRouter desde react-router-dom dentro de su archivo index.js , luego envuelva el componente de su aplicación en el elemento BrowserRouter :
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Envolver el componente de la aplicación en el elemento BrowserRouter 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 los elementos Route y Routes de react-router-dom.
Definirás tus Rutas dentro del componente App :
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';
function App() {
return (
<Routes>
<Route path='/' element={ <Home /> } />
<Route path='/about' element={ <About /> } />
<Route path='/blog' element={ <Blog /> }/>
</Routes>
)
}
export default App;
El componente de la aplicación es el componente principal que representa todo el código que ha escrito en sus otros componentes.
El elemento Rutas es el elemento principal que envuelve las rutas individuales que crea en el componente de su aplicación. El elemento Ruta crea una sola ruta. Toma dos atributos prop: una ruta y un elemento .
El atributo de ruta define la ruta URL del componente previsto. 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 componente Home se renderiza cuando ejecuta su aplicación. No confunda este sistema con la implementación de renderizado condicional en sus componentes React. Puede dar a este atributo de ruta el nombre que desee.
El atributo del elemento define el componente que representará la ruta .
Trabajar con el componente de enlace del enrutador React
El componente de enlace 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:
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to='/about'>About page</Link>
<Link to='/blog'>Blog page</Link>
<h1>This is the Home Page<h1/>
</div>
)
}
export default Home;
El componente de enlace es casi idéntico a la etiqueta de anclaje HTML <a> , solo usa un atributo llamado «to» en lugar de «href». El componente de enlace 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 componente de la aplicación .
Por ejemplo:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article' element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default App;
El bloque de código anterior importa y enruta los componentes creados Articles , NewArticle y ArticleOne . Hay algunas similitudes en las rutas URL entre las tres rutas.
El nombre de la ruta de NewArticle Route comienza igual que el nombre de la ruta de Articles Route, con una barra inclinada invertida (/) y la palabra “nuevo”, es decir, (/nuevo). La única diferencia entre los nombres de ruta de Articles Route y ArticleOne Route es la barra inclinada (/1) al final del nombre de ruta del componente ArticleOne .
Puede anidar las tres Rutas en lugar de dejarlas en su estado actual.
Al igual que:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article'>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Route>
</Routes>
)
}
export default App;
Ha envuelto las tres rutas individuales en un solo elemento de ruta . Tenga en cuenta que el elemento de ruta principal solo tiene el atributo de ruta y ningún atributo de elemento que defina el componente para representar. El atributo de índice en el primer elemento de ruta secundario especifica que esta ruta se representa cuando navega a la ruta de URL de la ruta principal .
Para que su código sea mejor y más fácil de mantener, debe definir sus rutas en un componente e importarlo al componente de la aplicación para su uso.
Por ejemplo:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function ArticleRoutes() {
return (
<Routes>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default ArticleRoutes;
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 al componente de la aplicación y enrutarlo usando un solo elemento de ruta .
Por ejemplo:
import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';
function App() {
return (
<Routes>
<Route path='/article/*' element={ <ArticleRoutes /> }>
</Routes>
)
}
export default App;
En el componente de ruta final , 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 corresponde a cualquier nombre de ruta que comience con (/article) .
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.
Deja una respuesta