web-dev-qa-db-fra.com

Root Navlink obtient toujours la classe active React Router Dom

J'utilise react-router-dom: 4.2.2. Je peux ajouter activeClassName à l'URL actuelle. Mais étonnamment, la classe est toujours ajoutée à l'URL racine.

Lors de la visite d'une page, par exemple la page d'erreur comme la capture d'écran ci-dessous, le lien de navigation d'accueil obtient également la classe active.

enter image description here

Mise à jour: Dans la capture d'écran ci-dessus, j'ai montré que j'ai visité http://localhost:3000/#/error. Alors le active-link doit être ajouté au Love Error? NavLink uniquement. Mais comme vous pouvez le voir, il est également ajouté à Home NavLink aussi.

Voici mon code navbar:

import React from 'react';
import { NavLink } from 'react-router-dom';

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li> <NavLink to = '/' activeClassName="active-link">Home</NavLink> </li>
    <li> <NavLink to = '/about' activeClassName="active-link">About Us</NavLink> </li>
    <li> <NavLink to = '/error' activeClassName="active-link">Love Error?</NavLink> </li>
  </ul>
)

Pour le routage, j'ai utilisé le commutateur suivant:

<Switch>
  <Route exact path = '/' component = {Home} />
  <Route exact path = '/about' component = {AboutUs} />
  <Route exact path = '/error' component = {Error404} />
  <Route path = "/news/:id" component = {NewsDetail} />
  <Route path="*" component={Error404} />
</Switch>

Comment puis-je obtenir le comportement attendu?

javascriptreactjsreact-router-dom
15
arsho

Vous devez utiliser isActive={} pour ajouter une vérification supplémentaire afin de vérifier si le lien est actif.

document

Fonctionnement jsFiddle . (le violon n'est pas créé par moi)

Le code que vous devez ajouter est comme ci-dessous

Exemple dans jsfiddle

<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>

Changement dans votre code

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

vérifiez le prop isActive et " checkActive " est une fonction.

const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "/";
}

Une autre configuration que vous pouvez utiliser est " exact " mais il n'est pas possible de le démontrer dans un jsFiddle. Je pense que le code serait comme

<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>

J'espère que cela t'aides. Et faites-moi savoir si vous avez besoin de plus d'informations.

14
Shashith Darshana

J'ai constaté que l'ajout de exact avant le premier activeClassName fonctionne également. Ainsi, par exemple, votre configuration peut être:

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li><NavLink to='/' exact activeClassName="active-link">Home</NavLink> 
    </li>
    ....remaining NavLinks
  </ul>
)
14
digitalh2o

Vous pouvez utiliser le mot clé exact pour la classe active, comme

<NavLink exact to ='/'>Home</NavLink>

ça va générer comme ça

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

et si vous obtenez une autre page, ce sera comme ça

<a href="/">Home</a>
4
fool-dev

J'ai récemment rencontré ce problème et l'ai résolu en ajoutant simplement:

import { withRouter } from 'react-router-dom';

puis enveloppé le composant avec:

export default withRouter(Component);
2
Jango17

Changement dans votre code

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

puis

const checkActive = (match, location) => {
  console.log(location);
  if (!location) return false;
  const { pathname } = location;
  const { url } = match;
  return pathname === url ? true : false;
};
  • remarque *
const { pathname } = location;
const { url } = match;
return pathname === url ? true : false;
1
kamalesh biswas

J'apprends React maintenant et vient de rencontrer le même problème. J'ai essayé ce qui suit et cela a fonctionné pour moi.

Donc, j'ai 3 liens de navigation.

<li><NavLink to="/home">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>

Mais j'ai ajouté 4 itinéraires.

<Route exact path="/" component={Home}></Route>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>

J'ai ajouté 2 routes (/ et/home) pour le même composant (Home). De cette façon, le react-router-dom semble ajouter la classe "active" uniquement au lien sur lequel vous cliquez.

0
Aravindh S N R

Vous pouvez utiliser Link au lieu de NavLink pour Home.

import { Link } from 'react-router-dom';

<Link to='/'>Home</Link>
0
Aliasghar Soltani