Búsqueda de sitios web

javascript - ¿Enlace activo con React-Router?

Estoy probando React-Router (v4) y estoy teniendo problemas para que al iniciar la navegación uno de los Link esté activo. Si hago clic en cualquiera de las etiquetas Link, entonces la funcionalidad de activo empieza a funcionar. Sin embargo, me gustaría que el Link de Inicio estuviera activo tan pronto como la aplicación se inicia, ya que ese es el componente que se carga en la ruta /. ¿Hay alguna manera de hacer esto?

Aquí está mi código actual:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

Respuesta #1

Esta es una respuesta antigua y desactualizada para React Router v4

<Link> ya no tiene las propiedades activeClassName o activeStyle. En react-router v4 tienes que usar <NavLink> si quieres hacer estilos condicionales:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

Agregué una propiedad exacta al <NavLink> de inicio, estoy bastante seguro de que sin ella, el enlace de inicio siempre estaría activo ya que / coincidiría con /about y cualquier otra página que tengas.

Respuesta #2

React Router v6:

Fuente: Clases de NavLink Activas con React Router

Ahora puedes usar la propiedad className que ahora acepta una función y pasa una propiedad booleana isActive, así:

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

También puedes agregar varias clases, ya que v6 está disponible:

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

Demostración en vivo: Clases NavLink activas con React Router

Respuesta #3

import { NavLink, useMatch, useResolvedPath } from 'react-router-dom';

const CustomNavLink = ({ to, title }) => {
   let resolved = useResolvedPath(to);
   let match = useMatch({ path: resolved.pathname, end: true });

   return (
      <NavLink to={to} className={`d-flex align-items-center py-2 px-4 ${match ? 'cta-btn' : 'c-n-b-link'}`} >
        <span className='ms-1 f-w-600'>{title}</span>
      </NavLink>
)
}

Para React router V6, el componente personalizado anterior devolverá un navlink al que se le puede activar una clase activa siempre que la ruta coincida con la ruta to dada.

Artículos relacionados