Instalación de React Router en una aplicación Redux

En lecciones anteriores, instalamos las principales herramientas para trabajar con Redux. A menudo sucede que una aplicación necesita un enrutador para navegar por sus páginas web y nuestra aplicación no será una excepción. Para ello instalaremos la biblioteca React Router.

Abrimos nuestro proyecto y escribimos en la terminal el siguiente comando:

npm install react-router-dom

Adelantándome un poco, diré que nuestra aplicación Redux tradicionalmente está dedicada a productos, cuya información es publicada por algunos vendedores. Por lo tanto, ahora vamos a modificar un poco el componente principal App, y también agregaremos a la aplicación la funcionalidad para realizar el enrutamiento.

Para empezar, vamos a la carpeta src, y luego a app y creamos aquí el archivo root.jsx. Este será la raíz de nuestro sitio: a la izquierda tendremos un menú, y a la derecha - el contenido (por ahora solo tenemos aquí un título):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Products</a>
					<a>Sellers</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>¡Esta es mi primera aplicación Redux!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Y vamos a modificar el componente App. Para empezar, eliminemos por completo su contenido. Luego importemos dos funciones para el enrutador y nuestro componente raíz Root:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

A continuación, después de la importación, creemos el enrutador y escribamos la primera ruta, pasándole nuestro Root como elemento a renderizar y, en consecuencia, estableciendo la ruta en '/'. En el futuro, en App agregaremos también otras rutas necesarias:

const router = createBrowserRouter([{ path: '/', element: <Root /> }])

A continuación, escribamos el código de la función App:

function App() {
	return <RouterProvider router={router} />
}

export default App

Listo. Lo ejecutamos. En la siguiente sección implementaremos los componentes para que funcione la aplicación Redux.

Para terminar, agreguemos un poco de estilo, escribiendo para ello estilos en index.css:

body {
	font-size: 24px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

#main {
	display: flex;
	margin: 20px;
}

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

Agrega React Router a tu aplicación.

Que tu aplicación trate sobre estudiantes, cuya información será publicada por los profesores. Teniendo esto en cuenta, crea el componente raíz Root. Modifica el componente App como se describe en la lección.