Si no consiguen el aria-current con Link usando react router, lo que deben hacer es cambiar el import de Link a NavLink. Es un nuevo componente de react router que si incluye esta clase.
Introducción al curso avanzado de React
Qué necesitas para este curso y qué aprenderás sobre React.js
Proyecto y tecnologías que usaremos
Preparando el entorno de desarrollo
Clonando el repositorio e instalando Webpack
Instalación de React y Babel
Zeit es ahora Vercel
Linter, extensiones y deploy con Now
Creando la interfaz con styled-components
¿Qué es CSS-in-JS?
Creando nuestro primer componente: Category
Creando ListOfCategories y estilos globales
Usar información real de las categorías
Creando PhotoCard y usando react-icon
SVGR: de SVG a componente de ReactJS
Creando animaciones con keyframes
Hooks
¿Qué son los Hooks?
useEffect: limpiando eventos
useCategoriesData
Usando Intersection Observer
Uso de polyfill de Intersection Observer e imports dinámicos
Usando el localStorage para guardar los likes
Custom Hooks: useNearScreen y useLocalStorage
GraphQL y React Apollo
¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC
Parámetros para un query con GraphQL
Usar render Props para recuperar una foto
Refactorizando y usando variables de loading y error
Usando las mutaciones con los likes
Reach Router
¿Qué es Reach Router? Creando la ruta Home
Usando Link para evitar recargar la página
Creando la página Detail
Agregando un NavBar a nuestra app
Estilando las páginas activas
Rutas protegidas
Gestión del usuario
Introducción a React.Context
Creación del componente UserForm; y Hook useInputValue
Estilando el formulario
Mutaciones para registro
Controlar estado de carga y error al registrar un usuario
Mutaciones para iniciar sesión
Persistiendo datos en Session Storage
Hacer like como usuario registrado
Mostrar favoritos y solucionar fetch policy
Cerrar sesión
Mejores prácticas, SEO y recomendaciones
Últimos retoques a las rutas de nuestra aplicación
React Helmet
Midiendo el performance de nuestra app y usando React.memo()
React.lazy() y componente Suspense
Usando PropTypes para validar las props
PWA: generando el manifest
PWA: soporte offline
Testing con Cypress
Conclusiones
¡Felicidades!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 19
Preguntas 3
Si no consiguen el aria-current con Link usando react router, lo que deben hacer es cambiar el import de Link a NavLink. Es un nuevo componente de react router que si incluye esta clase.
Este · es el punto que @midudev usa, si usan este . por los estilos que se utilizan no se va a ver en el navbar. Pasé más tiempo del debido viendo que problemas tenían mis estilos y era sólo el carácter ajajaja
Con react-router hay que utilizar NavLink en lugar de Link en los estilos.
import styled from "styled-components";
import { NavLink as LinkRouter } from "react-router-dom";
Pero además para que se desactive el icono de Home al seleccionar otro item, hay que agregarle exact al elemento Link en el index de NavBar:
<Nav>
<Link exact to="/">
<MdHome size={ICON_SIZE} />
</Link>
<Link exact to="/favorites">
<MdFavorite size={ICON_SIZE} />
</Link>
<Link exact to="/user">
<MdPerson size={ICON_SIZE} />
</Link>
</Nav>
Fecha: 26-03-22
Para los que usamos react-router-dom no tenemos ese atributo asi que implemente esta solucion:
index.js:
import React from 'react'
import { Link, Nav } from './styles'
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'
import { useLocation } from 'react-router-dom';
const SIZE = '32px';
export const NavBar = () =>{
const { pathname } = useLocation();
return (
<Nav>
<Link to='/' className={pathname==='/'?'selected':''}><MdHome size={SIZE} /></Link>
<Link to='/favs' className={pathname==='/favs'?'selected':''} ><MdFavoriteBorder size={SIZE} /></Link>
<Link to='/user' className={pathname==='/user'?'selected':''} ><MdPersonOutline size={SIZE} /></Link>
</Nav>
)
}
styles.js:
import styled from 'styled-components'
import { Link as LinkRouter } from 'react-router-dom'
import { fadeIn } from '../../styles/animation';
export const Nav = styled.nav`
align-items: center;
background: #fcfcfc;
border-top: 1px solid #e0e0e0;
bottom: 0;
display: flex;
height: 50px;
justify-content: space-around;
left: 0;
margin: 0 auto;
max-width: 500px;
position: fixed;
right: 0;
width: 100%;
z-index: 1000;
`
export const Link = styled(LinkRouter)`
align-items: center;
color: #888;
display: inline-flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
&.selected {
color: #000;
&:after {
${fadeIn({time:'0.5s'})}
content: '·';
position: absolute;
bottom: 0;
font-size: 34px;
line-height: 20px;
}
}
`
Solo por curiosidad, que desventajas (o ventajas) puede otorgarnos una librería como Materia-UI?. Siendo que ya tiene en su core componentes como el NaBar que estamos diseñando.
En Nextjs no tengo el atributo aria-current. Mi solución fue usar el Router de Nextjs para identificar en cuál dirección estoy y crear una clase “selected”, que luego usé en el styles.js. Recibo sugerencias de como hacer esto de una manera más eficiente!
NavBar.js:
<code>
import React from 'react';
import {Nav, A} from './styles'
import { useRouter } from 'next/router';
import Link from 'next/link';
import {MdHome,MdFavoriteBorder, MdPersonOutline} from 'react-icons/md'
const SIZE='32px'
const NavBar = () => {
const router = useRouter();
console.log(router);
return (
<Nav>
<Link href={'/'}>
<A className={router.route === '/' ? 'selected' : ''}>
<MdHome size={SIZE} />
</A>
</Link>
<Link href={'/favs'}>
<A className={router.route === '/favs' ? 'selected' : ''}>
<MdFavoriteBorder size={SIZE} />
</A>
</Link>
<Link href={'/user'}>
<A className={router.route === '/user' ? 'selected' : ''}>
<MdPersonOutline size={SIZE} />
</A>
</Link>
</Nav>
);
}
export default NavBar;
styles.js:
<code>
import styled from 'styled-components'
import { fadeIn } from 'styles/animation';
export const Nav=styled.nav`
align-items:center;
background:#fcfcfc;
border-top:1px solid #e0e0e0;
bottom:0;
display:flex;
height:50px;
justify-content:space-around;
left:0;
margin:0 auto;
max-width: 500px;
position:fixed;
right:0;
width:100%;
z-index:1000;
`
export const A = styled.a`
align-items: center;
color: #888;
display: inline-flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
&.selected {
color: #000;
&:after {
${fadeIn({time:'0.5s'})}
content: '·';
position: absolute;
bottom: 0;
font-size: 34px;
line-height: 20px;
}
}
`;
Les dejo mi repositorio con el avance hasta ahora:
Estilos
export const Link = styled(LinkRouter)`
align-items: center;
color: #888;
display: inline-flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
&[aria-current] {
color: #000;
&:after {
${fadeIn({ time: '0.5s' })};
content: '·';
position: absolute;
bottom: 0;
font-size: 34px;
line-height: 20px;
}
}
`
Para que se desative el icono del Home con react con react router 6 se usa el atributo end en vez de exact y queda asi el código index.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Nav, Link } from "./styles";
import { AiOutlineHome, AiOutlineHeart, AiOutlineUser } from "react-icons/ai";
const SIZE = "32px";
export const NavBar = () => {
return (
<BrowserRouter>
<Nav>
<Link end to="/">
<AiOutlineHome size={SIZE} />
</Link>
<Link end to="/favorites">
<AiOutlineHeart size={SIZE} />
</Link>
<Link end to="/user">
<AiOutlineUser size={SIZE} />
</Link>
</Nav>
</BrowserRouter>
);
};
codigo:
Atributo aria-current
muy interesante este curso
Muy buen tip el de aria-current , no esta en la escuela de html y css.
con react router dom no coloca el class ‘current-area’, esta fue mi solución para colocarlo usando el hook useLocation que provee la librería:
import React from 'react'
import { useLocation } from 'react-router-dom'
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'
import { Nav, Link } from './styles'
const SIZE = '25px'
export const Navbar = () => {
const { pathname } = useLocation()
const setCurrentArea = (path) => {
return pathname === path ? 'area-current' : ''
}
return (
<Nav>
<Link className={setCurrentArea('/')} to='/'><MdHome size={SIZE} /></Link>
<Link className={setCurrentArea('/favs')} to='/favs'><MdFavoriteBorder size={SIZE} /></Link>
<Link className={setCurrentArea('/user')} to='/user'><MdPersonOutline size={SIZE} /></Link>
</Nav>
)
}
❤️
Lo hice de dos formas y obtuve resultados similares con NavLink en vez de Link, o con “&:hover{}”.
Cabe destacar que con hover en version desktop, el icono sera de color negro incluso si se pasa el cursor sin darle Click.
Yo use el caracter ’ . ’ y para que se pudiera ver aumente el bottom
&[aria-current]{
color: black;
&:after{ /*Elemento justo despues*/
content: '.';
position: absolute;
bottom: 10px;
font-size: 34px;
line-height: 20px;
}
}
Excelente UX
Me encanto esta seccion, muy util, y Reach Router lo hace mas facil, creo que cada vez mas me convence de utilizar Reach Router.
aria-current no lo conocía pero le da muy buen estilo y mejora la experiencia del usuario, creo que lo usaré en el próximo proyecto 😄
Todos los usos que podemos darle son enfocados en los estilos supongo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.