Fundamentos de navegación en la web

1

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

2

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

3

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

4

Instalación de React Router DOM 6 en un proyecto React

5

Uso de Hash Router en Aplicaciones Web con React Router DOM

6

Creación de Rutas Dinámicas con React Router DOM 6

7

Navegación en React Router: Uso de Link y NavLink

8

Rutas dinámicas con React Router DOM y useParams

9

Uso de useNavigate en React Router DOM para navegación dinámica

10

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

11

Autenticación y Autorización en Apps con React Router y Hooks

12

Control de Acceso en Menú con Autenticación React

13

Protección de Rutas con React Router y Hooks

14

Roles y permisos en aplicaciones web: Autenticación y autorización

15

Retos avanzados en React: manejo de estado y composición de componentes

16

Mejorando la Redirección Post-Login en Aplicaciones Web

17

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

18

Migración de Todo Machine a React Router 6

19

Organización de carpetas y rutas en React con React Router DOM 6

20

Maquetación de Botón Editar en Lista de Tareas con React

21

Generación de IDs únicos para gestionar tareas en React

22

Migración de modales a rutas en React: implementación práctica

23

Editar ToDos en React con Custom Hook y URL Parameters

24

Mejora de la Experiencia del Usuario al Editar To Do's en React

25

Implementación de React Router en Proyectos Legacy

Próximos pasos

26

Filtrado de Búsquedas en URL con React Router

27

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

28

Clonación de Platzi Movies usando React y React Router

29

Clonación de React Router en Componentes React

30

Navegación Avanzada con React Router DOM 6

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Navegación en React Router: Uso de Link y NavLink

7/30
Recursos

¿Cómo transformar la navegación de una aplicación con React Router?

En el mundo del desarrollo web, la navegación eficiente es fundamental para una experiencia de usuario agradable. React Router nos ofrece herramientas como Link y NavLink que facilitan esta tarea, permitiendo cambiar la URL de nuestra aplicación con JavaScript sin necesidad de recargar la página. En esta ocasión, exploraremos cómo mejorar la navegación en nuestras aplicaciones utilizando estos componentes.

¿Qué diferencia hay entre las etiquetas <a> y los componentes Link y NavLink?

Cuando creamos un menú de navegación, frecuentemente usamos etiquetas <a> dentro de listas desordenadas (<ul>), como:

<nav>
  <ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/blog">Blog</a></li>
    <li><a href="#/profile">Profile</a></li>
  </ul>
</nav>

Sin embargo, este método tiene limitaciones, como la necesidad de ajustar manualmente el href para el hash. Aquí es donde Link y NavLink simplifican el proceso:

  • Link: Es un componente oficial de react-router-dom que usa la propiedad to en lugar de href, eliminando la necesidad de gestionar hashes manualmente.

    import { Link } from 'react-router-dom';
    
    <Link to="/home">Home</Link>
    
  • NavLink: Similar a Link, pero con más flexibilidad en cuanto a estilos y clases, permitiéndonos aplicar estilos condicionales en función de si el enlace está activo.

    import { NavLink } from 'react-router-dom';
    
    <NavLink to="/home" style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}>
      Home
    </NavLink>
    

¿Cómo estilizar enlaces de forma condicional con NavLink?

Una de las ventajas de NavLink es su capacidad para estilizar enlaces dinámicamente. Esto se logra gracias a su capacidad de recibir un parámetro llamado isActive, que indica si la ruta a la que apunta el enlace es la actual.

  • Usamos una función para retornar un objeto de estilos o un string de clases:

    <NavLink
      to="/home"
      style={({ isActive }) => ({
        color: isActive ? 'red' : 'blue'
      })}
    >
      Home
    </NavLink>
    

Esto nos permite destacar visualmente el enlace de la ruta en la que nos encontramos, mejorando la claridad del usuario sobre su ubicación actual en la aplicación.

¿Cómo optimizar el código de rutas dinámicas?

Al trabajar con varias rutas, es común que nos enfrentemos a mucho código repetido. Una práctica recomendada es crear un arreglo de objetos que contenga las rutas y su correspondiente texto de visualización. A partir de este arreglo, podemos generar los componentes de manera dinámica:

const routes = [
  { to: '/', text: 'Home' },
  { to: '/blog', text: 'Blog' },
  { to: '/profile', text: 'Profile' }
];

<ul>
  {routes.map(route => (
    <li key={route.to}>
      <NavLink to={route.to} style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}>
        {route.text}
      </NavLink>
    </li>
  ))}
</ul>

Este enfoque no solo minimiza el código repetido, sino que también facilita la expansión futura del menú de navegación, mejorando la mantenibilidad del código.

¿Qué precauciones tomar al usar otros routers?

Si estás utilizando una versión diferente de React Router o incluso otro tipo de enrutador, es fundamental consultar la documentación para encontrar los equivalentes de Link y NavLink. La comprensión completa de estos componentes aumentará la eficacia de nuestra navegación:

  • Asegúrate de estar actualizado con la documentación más reciente del router que uses.
  • Verifica las propiedades y métodos específicos que ofrecen componentes como NavLink para aprovechar al máximo sus funcionalidades.

Al utilizar estas herramientas y técnicas, estarás mejor preparado para construir aplicaciones con una navegación fluida y eficiente, fomentando una experiencia de usuario positiva. ¡Continúa explorando y mejorando tus habilidades en el desarrollo web!

Aportes 26

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si te pasa como a mi que la ruta “/” está siempre activa, solo necesitas pasar como parametro al NavLink la propiedad end
Quedaría de la siguiente manera:

<NavLink 
      style={({ isActive }) => ({
         color: isActive ? "red" : "blue"
       })}
          to={route.to}
          end
	>
         {route.text}
</NavLink>

Me encuentro en la versión 6.4.0 de react-router-dom

SI LO BORRE NO PASA NADA QUE HAYA BORRADO EL CÓDIGO
yo: pero no me grite ;-;

Link vs. NavLink

Link

Estas nos ayudan a evitar el uso de las etiquetas <a> en caso de que deseemos pasar a otro contenido por medio de los NavHashes evitándonos el tener que volver a descargar el HTML nuevamente ya que cambia la URL manualmente.

// Importamos la etiqueta link
import { Link } from 'react-router-dom';

function Menu() {
  return (
    <nav>
      <ul>
        
        <li>
          {/* Si lo comparamos con las etiquetas <a> su href="" 
          vendría siendo su parámetro to="", para estas no hay 
          necesidad de colocar los hash */}
          <Link to="/">Home</Link>
        </li>

        <li>
          <Link to="/blog">Blog</Link>
        </li>

        <li>
          <Link to="/profile">Profile</Link>
        </li>

      </ul>
    </nav>
  );
}

Si lo probamos vemos que no nos está recargando la página y que nos envía y renderiza los componentes que deseamos.

NavLink

Este funciona exactamente igual que Link, incluso la propiedad to="/" también se usa en este componente, pero nos permite cierta flexibilidad, por ejemplo, cuando queramos darle una clase a nuestros componentes o estilos manuales nos permite que en nuestras propiedades className={} o style={} nos permite devolver una función.

// Importamos la etiqueta NavLink
import { Link, NavLink } from 'react-router-dom';

function Menu() {
  return (
    <nav>
      <ul>

        <li>
          <NavLink 
						to="/"
            className={() => ''}
            style={() => ({background: '#fff'})}
					>Home</NavLink>
        </li>

        <li>
          <NavLink to="/blog">Blog</NavLink>
        </li>

        <li>
          <NavLink to="/profile">Profile</NavLink>
        </li>

      </ul>
    </nav>
  );
}

Estas mismas funciones nos permite enviar un parámetro llamado isActive, el cual nos permite saber si la ruta en la que se envía este componente es en la que estamos actualmente, y dependiendo de eso podemos darle una nueva clase o cambiar los estilos.

Para que esto funcione debemos pasarle a nuestro componente la propiedad end, si no, este siempre permanecerá activo.

<NavLink 
	end // <--
  style={({isActive }) => ({
			color: isActive ? 'green' : 'red'
		})
	}
>Home</NavLink>

Si añadimos estas funciones una por una en los componentes tendremos bastante desorden, para arreglar este problema podemos crear un Array de posiciones.

const routes = [];

routes.push({
  to: '/',
  text: 'Home'
});
routes.push({
  to: '/blog',
  text: 'Blog'
});
routes.push({
  to: '/profile',
  text: 'Profile'
});

Y ahora podemos recorrer este Array en el JSX para que se añadan los componentes de manera dinámica.

function Menu() {
  return (
    <nav>
      <ul>

        {routes.map(route => (
          <li>
            <NavLink 
              to={route.to}
              end
              style={ ({ isActive }) => ({
                color: isActive ? 'green' : 'red'
              })}
            >
              {route.text}
            </NavLink>
          </li>
        ))}

      </ul>
    </nav>
  );
}

De esta forma creamos un componente una sola vez y se añadirán a nuestra <nav> de manera dinámica, así en el futuro no tenemos que estas copiando y pegando código, solamente debemos crear otro elemento dentro del Array.

En mi caso solo separé en un archivo routes.js

const routes = [
  {
    id: 1,
    to: '/',
    text: 'Home'
  },
  {
    id: 2,
    to: '/blog',
    text: 'Blog'
  },
  {
    id: 3,
    to: '/profile',
    text: 'Profile'
  }
];

export { routes };

y lo inserté dentro del Menú

import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { routes } from '../routes/routes.js';

const Menu = () => {
  return (
    <>
        <ul className='bg-slate-800 flex justify-around'>
      {routes.map(route => (
          <li key={route.id}>
            <NavLink
              className={({ isActive }) => (
                isActive ? 'text-white' : 'text-black'
            )}
              to={route.to}
            >{route.text}</NavLink>
          </li>
      ))}
      </ul>
    </>
  )
}

export { Menu };

Mi notas de esta clase:

  • <a>

    • Hace una petición al servidor.
    • Tenemos que aclarar el uso del #.
  • Link:

    • No hace una petición del servidor.
    • No tenemos que aclarar el uso del #.
  • NavLink:

    • No hace una petición al servidor.
    • No tenemos que aclarar el uso del #.
    • Cuando le queremos dar una clase o estilos, nos va a permitir que le entreguemos una función que retorne un string, o las propiedades para la etiqueta “style” en un objeto, ¿Para que nos sirve esto? pues gracias a esta cualidad podemos recibir un parámetro llamado “isActive”

    isActive:

    Gracias a este parámetro vamos a poder asignar estilos especiales a la etiqueta <NavLink> cuando la ruta le corresponda.

<NavLink 
   style={({isActive})=>({
      color: isActive ? 'red' : 'blue'
      })}to="/">
Home
</NavLink>```

Hi banda. Como complemento, recuerden que cuando retornamos hijos a través de un .map (por ejemplo), cada hijo debe contar con la propiedad key o si no React se quejará.
.
En cada <li> que retornan al recorrer la lista de rutas, pueden colocarle como key el text o el indice. En mi caso le puse el text ya que es único para cada uno.
.

routes.map(route => (
            <li key={route.text}>
              <NavLink 
                style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}
                to={route.to}
              >
                {route.text}
              </NavLink>
            </li>
          ))

routes.js

import { BlogPage } from './BlogPage';
import { HomePage } from './HomePage';
import { ProfilePage } from './ProfilePage';

const routes = [
    {
        path: '/',
        element: <HomePage />,
        text: 'Home'
    },
    {
        path: '/blog',
        element: <BlogPage />,
        text: 'Blog'
    },
    {
        path: '/profile',
        element: <ProfilePage />,
        text: 'Profile'
    },
]

export default routes

App.js

import {HashRouter, useRoutes} from 'react-router-dom'
import routes from './routes'

import { Menu } from './Menu';

function Router() {
  
  const elements = useRoutes(routes)
  return elements
}

function App() {
  return (
    <HashRouter>
      <Menu />
      <Router />
    </HashRouter>
  );
}

export default App;

Menu.js

import React from 'react'
import { NavLink } from 'react-router-dom'
import routes from './routes'

function Menu() {
    return (
        <nav>
            <ul>
                {routes.map(route =>(
                    <li>
                        <NavLink
                            style={({ isActive }) => ({
                                color: isActive ? 'red' : 'blue'
                            })}
                            to={route.path}
                        >
                                {route.text}
                        </NavLink>
                    </li>)
                )}
            </ul>
        </nav>
    )
}

export { Menu }

NavLink tiene por defecto una clase con el nombre “active”. Pueden verlo desde el inspector de elementos del navegador.

asi se ve el inspector de elementos.

<aria-current="page" class="active" href="/#">HOME</a>

solo es agregarle el estilo en CSS y ya.
a.active{ color: red; }

Funciona igual que el ejemplo del profe JuanDC, sin necesidad de utilizar arrow function.

No se olviden de desestructurar el isActive 😃
.

Estoy usando la versión V6.15 de React Router DOM y así implemente el código.
.
Como estamos usando routes.map() para recorrer el array donde almacenamos nuestras rutas, tuve que usar un key attribute para <li>.
.
Ademas destructurar isActive y usar la propiedad end.

MENU COMPONENT

function Menu() {
  return (
    <nav>
      <ul>
        {routes.map(route => (

          <li key = {route.text}>
            <NavLink
              style ={ ( {isActive} ) => ({
                color: isActive ? 'red' :'blue',
              }) }
              to={route.to}
              end
            >
              {route.text}
            </NavLink>

          </li>

        ))} 
      </ul>
    </nav>
  )
}

.
ROUTES

const routes = [];
routes.push({
	to : '/',
	text: 'Home'
});

routes.push({
	to : '/profile',
	text: 'Profile'
});

routes.push({
	to : '/blog',
	text: 'Blog'
});

Nav Link es muy bellako

Les comparto esto si les daba este error:

error:03000086:digital envelope routines::initialization error
'err_ossl_evp_unsupported'

Descarguen la nueva actualización de react-router, si tienen actualizado el nodejs:

npm install react-router-dom@6.4

Por último, métele una buena fixeada:

npm audit fix --force

Código de la clase en TypeScript:
Igual que el código del profesor con la siguiente diferencia:

interface IRoute {
    id: number,
    to: string,
    text: string
}

const routes:IRoute[] = [
    {
        id: 1,
        to: '/',
        text: 'Home'
    },
    {
        id: 2,
        to: '/blog',
        text: 'Blog'
    },
    {
        id: 3,
        to: '/profile',
        text: 'Profile'
    }
];

Link vs. NavLink

.
Los componentes Link y NavLink nos ayudarán para que nuestra navegación no se transforme en nuevas peticiones al servidor para que descargue un nuevo HTML, sino que solo haga la navegación desde Javascript. Vamos a cambiar la etiqueta <a></a> con alguna de estas 2 opciones, y esto nos permite cambiar de url sin recargar la página y podamos mostrar la información correspondiente.
.
Eventualmente, si utilizamos la forma normal de crear enlaces no va a funcionar, puesto que estamos utilizando un HashRouter.
.

<nav>
	<ul>
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/blog">Blog</a>
		</li>
		<li>
			<a href="/profile">Profile</a>
		</li>
	</ul>
</nav>

.
Si quisiéramos forzar su funcionamiento tendríamos que agregar manualmente los hashes a las rutas en la propiedad href. Sin embargo, esta etiqueta lo que hace es hacer una nueva petición al servidor para que se descargue otra vez el HTML y no queremos eso.
.

<nav>
	<ul>
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/#/blog">Blog</a>
		</li>
		<li>
			<a href="/#/profile">Profile</a>
		</li>
	</ul>
</nav>

.
Vamos a utilizar la etiqueta <Link></Link> el cual funciona parecido a la etiqueta <a></a>, solo que en lugar de utilizar href utilizaremos la propiedad to.
.

function Menu() {
	return (
		<nav>
			<ul>
				<li>
					<Link to="/">Home</Link>
				</li>
				<li>
					<Link to="/blog">Blog</Link>
				</li>
				<li>
					<Link to="/profile">Profile</Link>
				</li>
			</ul>
		</nav>
	)
}

export { Menu };

.
Si navegamos esta vez no volverá a cargar la página, porque Link es un componente oficial de react-router-dom y sabe que tipo de router estamos utilizando. Esto significa que agrega o no el hash, dependiendo de lo que necesitemos. Incluso si estuviéramos trabajando con un BrowserRouter la navegación se realiza sin recargar la página, sino que va a ser el mismo HTML y con Javascript estamos cambiando los componentes que renderizamos en una ruta u otra.
.

function Menu() {
	return (
		<nav>
			<ul>
				<li>
					<NavLink 
						style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
	          to="/">Home</NavLink>
				</li>
				<li>
					<NavLink 
						style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
						to="/blog">Blog</NavLink>
				</li>
				<li>
					<NavLink 
						style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
						to="/profile">Profile</NavLink>
				</li>
			</ul>
		</nav>
	)
}

export { Menu };

.
Al utilizar NavLink se sigue utilizando to para la ruta, sin embargo este componente nos permite utilizar los componentes className y style. A travéz de estas propiedades, por ejemplo podemos utilizar funciones y recibir por destructuración al parámetro isActive que nos indica si nos encontramos en esa ruta en particular o si está activa, luego podemos realizar condicionales y devolver un estilo u otro dependiendo de ello.
.

function Menu() {
  return (
    <nav>
      <ul>
        {routes.map(route => (
          <li>
            <NavLink
              style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
              to={route.to}
            >
              {route.text}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
}

const routes = [];
routes.push({
  to: '/',
  text: 'Home',
});
routes.push({
  to: '/blog',
  text: 'Blog',
});
routes.push({
  to: '/profile',
  text: 'Profile',
});

export { Menu };

.
Como pudimos observar habían partes de código repetido, por lo cual es conveniente crear un arreglo de rutas donde iremos insertando unos objetos con las propiedades to y text, que nos servirán para renderizar los items de nuestra lista de manera dinámica mediante un map y utilizando el style una sola vez.

hay una forma mejor y mas limpia y es usando el hook de useRouter que ya viene instalado.

export function Menu() {
const routes = useRoutes(routesDeJuanDc)

return <>
{routes}
</>
}

y en App dentro del BrowserRouter va el componente <Menu/>
y routesDeJuanDc es el array de objetos con las props de cada Route

Banda me funciono esto directo con el className para el css ![](https://static.platzi.com/media/user_upload/code-196b256d-63cd-4246-b966-af69da00fcb2.jpg)

Bueno si te sale un error de consola es porque debes agregar una key para cada elemento de la lista, a mi me gusta trabajar como array de objetos de una vez:

<nav>
      <ul>
      {routes2.map(route => (
          <li key={route.id}>
            <NavLink
              
              style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
              to={route.to}
              end
            >
              {route.text}
            </NavLink>
          </li>
        ))}
	</ul>
	</nav>

y el array:

const routes2 = [
  {
    id:1,
    to: '/',
    text: 'Home',
  },
  {
    id:2,
    to: '/blog',
    text: 'Blog',
  },
  {
    id:3,
    to: '/profile',
    text: 'Profile',
  },
];

Por si alguien le sirve el dato

En la iteración de routes

routes.map( route => (
	<li> //key?
		//......
	</li>
) )

recordemos que React necesita un identificador único para no tener problemas en los renderizados.
.
Podríamos usar una propiedad “id” dentro de cada objeto del array routes.

routes.map( route => (
	<li key={route.id}>
		//......
	</li>
))
function Menu() {
  return (
    <NavContainer>
      <NavStyle>
        <h2>MY BLOG</h2>
        <ul className='links'>
          {routes.map(route => (
            <li key={route.to}>
              <NavLink
                className={({ isActive }) => isActive ? 'active' : undefined}

                to={route.to}
              >
                {route.text}
              </NavLink>
            </li>
          ))}
        </ul>
      </NavStyle>
    </NavContainer>
  )
}

const NavStyle = styled.nav`
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;

  h2{
    color: white;
  }

  .links{
    display: flex;
    gap: 12px;
    li{
      font-size: 1.5rem;
      font-weight: 400;
      list-style: none;
      a{
      text-decoration: none;
      color: white;
      }
      .active{
        color: #efe5fd;
        font-size:1.8rem;
        font-weight: bold;
      }
    }
  }
  
`

const NavContainer = styled.div`
  width: 100%;
  height: 4.5rem;
  background-color: #555;
`
import React from 'react'
import { NavLink } from 'react-router-dom';

function Menu() {
  return (
    <ul>
      {routes.map(route => (
        <li>
          <NavLink
            style={({ isActive }) => ({
              color: isActive ? 'red' : 'blue',
            })}
            to={route.to}
          >
            {route.text}
          </NavLink>
        </li>
      ))}
    </ul>
  )
}

const routes = [];
routes.push({
  to: '/',
  text: 'Home'
})

routes.push({
  to: '/blog',
  text: 'Blog'
})

routes.push({
  to: '/profile',
  text: 'Profile'
})

routes.push({
  to: '/contact',
  text: 'Contact'
})
export { Menu };

Si quieren modificar algún hijo con NavLink:

          <NavLink to={route.LINK} key={route.LINK}>
            {({ isActive }) => (
              <li className= {
			isActive 
			? 'border-radius'
			: 'border-solid'
			
		}>
			home
              </li>
            )}
          </NavLink>

juan dc experto borrando codigos jaaaaaaaaaaaa

¡Hola compas! 👋 Les comparto la versión en inglés de mi trabajo, con algunos toques, donde podrán ver: \- Estructura de carpetas siguiendo buenas prácticas \- Mensajes de commit en inglés (útil para portafolio) \- Nombres de branches siguiendo convenciones profesionales Links: \- Branch específico de la clase: <https://github.com/SebaMat3/react-router-course-p1/tree/class-link-navlink> \- Commits: <https://github.com/SebaMat3/react-router-course-p1/commits/class-link-navlink/> Tips: \- Noten cómo los commits explican QUÉ se hizo y POR QUÉ \- La estructura /routes y /components ayuda a organizar mejor el código \- Los nombres de branches como 'feat/menu-navlink' indican el propósito Cualquier duda me escriben en los comentarios! 💻✨
Con este curso estoy arreglando un proyecto que hice hace mucho y tenía un montón de errores. Reemplzando por navlink e iterando el arreglo, antes lo hacía uno por uno jaja ```js function Sidebars() { const activeStyle = "active flex p-2 lg:p-4 items-center gap-x-2 text-secondary-100 rounded-full lg:rounded-none lg:rounded-l-full bg-secondary-100 text-secondary-600 font-medium"; const disableStyle = "flex p-2 lg:p-4 items-center gap-x-2 text-secondary-100 lg:rounded-r-full hover:bg-secondary-100 hover:text-secondary-600 hover:font-medium hover:rounded-full lg:hover:rounded-r-3xl"; const navigation = [ { href: "/", name: "Inicio", icon: <Home size={25} />, }, { href: "/paquetes-turisticos", name: "Paquetes turísticos", icon: <MountainSnow size={25} />, }, { href: "/reservas", name: "Reservas", icon: <CalendarCheck2 size={25} />, }, { href: "/entidades", name: "Entidades", icon: <Building size={25} />, }, { href: "/usuarios", name: "Usuarios", icon: <Users size={25} />, }, { href: "/mi-perfil", name: "Mi perfil", icon: <SquareUserRound size={25} />, }, ]; return ( <aside className="fixed z-30 bottom-0 lg:top-0 lg:left-0 w-11/12 md:w-3/5 lg:h-full lg:rounded-r-2xl space-y-8 lg:w-80 bg-secondary-600 px-2 lg:px-0 rounded-full lg:rounded-s-none lg:pt-20 m-4 lg:m-0 py-2">
    {navigation.map((item, idx) => (
  • <NavLink to={item.href} className={({ isActive }) => isActive ? activeStyle : disableStyle } >
    {item.icon}
    {item.name} </NavLink>
  • ))}
</aside> ); } export { Sidebars }; ```function Sidebars() {  const activeStyle =    "active flex p-2 lg:p-4 items-center gap-x-2 text-secondary-100 rounded-full lg:rounded-none lg:rounded-l-full bg-secondary-100 text-secondary-600 font-medium";   const disableStyle =    "flex p-2 lg:p-4 items-center gap-x-2 text-secondary-100 lg:rounded-r-full  hover:bg-secondary-100 hover:text-secondary-600 hover:font-medium hover:rounded-full lg:hover:rounded-r-3xl";   const navigation = \[    {      href: "/",      name: "Inicio",      icon: \<Home size={25} />,    },    {      href: "/paquetes-turisticos",      name: "Paquetes turísticos",      icon: \<MountainSnow size={25} />,    },    {      href: "/reservas",      name: "Reservas",      icon: \<CalendarCheck2 size={25} />,    },    {      href: "/entidades",      name: "Entidades",      icon: \<Building size={25} />,    },    {      href: "/usuarios",      name: "Usuarios",      icon: \<Users size={25} />,    },    {      href: "/mi-perfil",      name: "Mi perfil",      icon: \<SquareUserRound size={25} />,    },  ];   return (    \<aside className="fixed z-30 bottom-0 lg:top-0 lg:left-0 w-11/12 md:w-3/5 lg:h-full lg:rounded-r-2xl space-y-8 lg:w-80 bg-secondary-600 px-2 lg:px-0 rounded-full lg:rounded-s-none lg:pt-20 m-4 lg:m-0 py-2">              \
          \
                {navigation.map((item, idx) => (              \
  •                 \<NavLink                  to={item.href}                  className={({ isActive }) =>                    isActive ? activeStyle : disableStyle                  }                >                  \
    {item.icon}\
                      \{item.name}\                \</NavLink>              \
  •             ))}          \
        \
    \</aside>  );} export { Sidebars }; ![](https://static.platzi.com/media/user_upload/Screenshot_122-3f082426-2314-4cfd-982d-0fbcf40aaa60.jpg)

Link VS. NavLink

Aunque ambos te redirigen hacia otra url, con NavLink en sus propiedades className y style te permiten recibir 2 parámetros: isActive y isPending.

Código usando Link

   <Link to="/">Home</Link>

Código usando NavLink

   <NavLink
      to="/"
      style={({ isActive }) => ({
         color: isActive ? 'red' : 'black',
      })}
   >
      Home
   </NavLink>