Lien actif avec React-Router ?

Question

Je suis en train d'essayer React-Router (v4) et j'ai des problèmes pour démarrer le Nav afin d'avoir l'un des éléments de la base de données. Link L'être active . Si je clique sur l'un des Link tags, puis les trucs actifs commencent à fonctionner. Cependant, j'aimerais que Home Link doit être actif dès le démarrage de l'application, car c'est le composant qui se charge à l'ouverture de l'application. / route. Y a-t-il un moyen de faire cela ?

Voici mon code actuel :

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>
)

Answer 1

<Link> n'a plus le activeClassName o activeStyle propriétés. Dans react-router v4 vous devez utiliser <NavLink> si vous voulez faire du style conditionnel :

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} 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>
)

J'ai ajouté une propriété exacte à la maison <NavLink> je suis presque sûr que sans cela, le lien d'accueil serait toujours actif puisque / correspondrait à /about et toutes les autres pages que vous avez.

Answer 2

React Router v6 :

Source : Classes NavLink actives avec React Router

Vous pouvez maintenant utiliser le className qui accepte désormais une fonction et transmet un isActive propriété booléenne, comme ceci :

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

Vous pouvez également ajouter plusieurs classes, puisque v6 est sorti :

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

Démonstration en direct : Classes NavLink actives avec React Router

Answer 3

En complément de la réponse de @Nick (React Router v6), pour ceux qui ont besoin de l'état de la navigation active dans le contexte supérieur

Le rendu conditionnel pourrait être un cas d'utilisation pour ce besoin. Par exemple : si l'icône est active, l'icône remplie est rendue sinon l'icône normale est rendue.

On pourrait y parvenir en trouvant la route dans laquelle nous nous trouvons actuellement, puis en effectuant l'opération de rendu conditionnel, mais ce serait un peu lourd.

Au lieu de cela, nous pouvons écrire une fonction qui modifie l'état dans Navlink L'accessoire de style de l'entreprise est le suivant

  const [active, setActive] = useState('home')

  const activate = (isActive, path, activeStyle, nonActiveStyle) => {
    if (isActive) {
      setActive(path)
      return activeStyle
    }
    return nonActiveStyle
  }

  return (
    <nav>
      <NavLink
        to="/"
        style={(activeNav) => activate(activeNav.isActive, 'home')}
      >
        {active === 'home' ? <HomeFill /> : <Home />}
      </NavLink>
      <NavLink
        to="/profile"
        style={(activeNav) => activate(activeNav.isActive, 'profile')}
      >
        {active === 'profile' ? <ProfileFilled /> : <Profile />}
      </NavLink>
    </nav>
  )

Answer 4

Dans mon cas <NavLink /> automatiquement active aux éléments, j'utilise donc la méthode suivante

monComponet.js

<ListItem component={NavLink} to="/somewhere" className="myactive" > something </ListItem>

monStyle.css

a.active.myactive {
 // some styles
}

Answer 5

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 Le composant personnalisé ci-dessus renverra un lien de navigation qu'une classe active pourra activer lorsque le chemin correspondra à l'adresse donnée. to chemin.