J'ai appliqué activeClassName à <NavLink> mais il ne le <NavLink> pas lorsqu'il est sur la page. Ce qui se passerait à la place, c'est lorsque le lien est cliqué dessus, il stylise le lien mais il revient lorsque le clic est relâché. Voici une capture d'écran . J'ai aussi essayé activeStyle mais la même chose. Voici mon code.
index.js
{
"name": "routing",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
index.css
body {
margin: 0;
padding: 2rem;
font-family: sans-serif;
}
/* a, a:hover {
color: black;
} */
a.active {
color: red;
}
package.json
import React from 'react';
import ReactDOM from 'react-dom';
import {
Route,
NavLink,
BrowserRouter as Router,
Switch
} from 'react-router-dom';
import './index.css';
import App from './App';
import Users from './Users';
import Contact from './Contact';
import Notfound from './Notfound';
import * as serviceWorker from './serviceWorker';
const routing = (
<Router>
<div>
<ul>
<li>
<NavLink exact activeClassName="active" to="/">Home</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/users">Users</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/contact">Contact</NavLink>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/users" component={Users} />
<Route path="/contact" component={Contact} />
<Route component={Notfound} />
</Switch>
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
serviceWorker.unregister();
C'est le tutoriel que je suivais. Je sais que c'est une question en double, mais aucune des réponses n'a pu aider.
Navigateurs testés sur:
Version de réaction: ^ 16.12.0
Version du routeur React: ^ 5.1.2
Capture d'écran du composant DevTools pour NavLink actif
Capture d'écran du composant DevTools pour Link child
Dernière édition: Très bien, merci pour les réponses. Aucun n'a été utile, je vais donc quitter cette fonctionnalité et trouver une solution de contournement.
3 Réponses :
Le code suivant fonctionne pour moi:
/* a, a:hover {
color: black;
} */
a.active {
color: red;
}
Index.css
body {
margin: 0;
padding: 2rem;
font-family: sans-serif;
}
import React from 'react';
import ReactDOM from 'react-dom';
import {
Route,
NavLink,
BrowserRouter as Router,
Switch
} from 'react-router-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
class App extends React.Component {
render() {
return (
<Router>
<div>
<ul>
<li>
<NavLink exact activeClassName="active" to="/">Home</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/users">Users</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/contact">Contact</NavLink>
</li>
</ul>
</div>
</Router>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
1. Vous avez emprunté les itinéraires pour que cela ne fonctionne pas vraiment. 2. Cela n'a pas fonctionné après l'ajout des itinéraires.
Cela fonctionne pour moi même avec les itinéraires. Je l'ai sorti simplement pour une meilleure vue d'ensemble du code. Vous pouvez peut-être partager un lien vers un éditeur en direct pour que je puisse voir quel est le problème de votre côté.
Cela fonctionnait en fait sur le bac à sable. codesandbox.io/s/nervous-haibt-k2cvv Le code dessus est le même que le code que j'ai sur mon éditeur local sauf pour les fichiers de test. J'ajouterai le fichier package.json dans la question. S'il y a quelque chose qui ne va pas là-dedans.
J'ai vérifié le fichier package.json et il semble que tout va bien. Je l'ai essayé pour moi et encore une fois cela a fonctionné. Si le violon a fonctionné, peut-être que quelque chose ne va pas avec la façon dont vous exécutez votre application avec votre éditeur local?
J'ai l'application ouverte dans VS Code. Je l'exécute avec npm start ne npm start rien d'autre.
Pouvez-vous ajouter une capture d'écran de votre composant devtool "Lien" qui est actif. Le className apparaît-il comme indéfini?
Je l'ai édité dans la question à la fin. Non, cela n'est pas indéfini.
Désolé, je ne parlais pas du "NavLink" mais du "Lien" des enfants du composant actif à ce moment-là. Il doit avoir un nom de classe: "actif". Pouvez-vous vérifier et ajouter cette capture d'écran
Très bien, j'ai également modifié cela. Il a un nom de classe "indéfini".
le nom de classe doit être "actif". Il provient de activeClassName = "active" de NavLink. Si vous vérifiez vos fichiers «react-router-dom», vous pouvez le voir. Finalement, cela vous aidera à réinstaller 'react-router-dom'
J'ai réinstallé «react-router-dom». Pas de changement. J'ai également mis à jour la même chose pour Node.js.
J'ai résolu ce problème lorsque je désinstalle le paquet gh-pages et que je le réinstalle
Oh vraiment? Je vais essayer et vous recontacter. Cela fait-il partie de react-bootstrap? Désolé pour la réponse tardive au fait.
a.active ne s'applique pas à activeClassName du routeur activeClassName . Vous devez faire référence à une classe de style existante .active , pas à a . Retirez le a :
.active {
color: red;
}
Si vous inspectez le lien dans les outils de développement, voyez-vous la classe active appliquée puis supprimée immédiatement?
Cela fonctionne parfaitement bien pour moi. Y a-t-il d'autres erreurs que vous obtenez?
Jeremy, non, la classe active n'est pas du tout appliquée. sina_r, pas d'autres erreurs.