NavBar / NavLink保存“选定的” React

Question

我的问题是这个，

在下面的代码中

我有一个NavBar可以正常工作

这里是问题

当我单击三个第一个元素时，一切都很好，只有当我单击“食物”或“射击”时，我的导航栏才会再次从0开始显示，而我希望它始终专注于“镜头”或“软”。

我希望我已经正确表达了我的问题，谢谢您的帮助

 import React from "react";
 import { NavLink } from 'react-router-dom';
 import Slider from "react-slick";
 // Le css
 import './NavBar.scss'

 class NavBar extends React.Component {
   render() {
   const settings = {
   className: "sliderShadowBoxNavBar",
   centerMode: true,
   infinite: true,
   centerPadding: "60px",
   slidesToShow: 1,
   slidesToScroll: 1,
   speed: 500,
   rows: 1,
   slidesPerRow: 1,
   focusOnSelect: true,
};
return (
  <Slider {...settings}>
    <div className=''>
      <div className='containerNavBar'>
        <NavLink activeClassName="selected" className="inactive" to="/Homescreen">
          <p className="textNavBar">Bières</p>
        </NavLink>
        <NavLink activeClassName="selected" className="inactive" to="/CocktailsHomeScreen">
          <p className="textNavBar">Cocktails</p>
        </NavLink>
        <NavLink activeClassName="selected" className="inactive" to="/VinHomeScreen">
          <p className="textNavBar">Vins</p>
        </NavLink>
      </div>
    </div>
    <div>
      <div className='containerNavBar'>
        <NavLink activeClassName="selected" className="inactive" to="/PlanchesHomeScreen">
          <p className="textNavBar">Food</p>
        </NavLink>
        <NavLink activeClassName="selected" className="inactive" to="/AlcoolFortHomeScreen">
          <p className="textNavBar">Spiritueux</p>
        </NavLink>
        <NavLink activeClassName="selected" className="inactive" to="/ShotScreen">
          <p className="textNavBar">Shots</p>
        </NavLink>
        <NavLink activeClassName="selected" className="inactive" to="/SoftHomeScreen">
          <p className="textNavBar">Softs</p>
        </NavLink>
      </div>
    </div>
  </Slider>
   );
  }
 }
export default NavBar;

我的问题是现在，在下面的代码中，我有一个NavBar可以正常工作。这是我单击三个第1个元素时一切都很好的问题，只有当我单击“食物”或“ ......时>

Answer 1

尝试在导航链接上添加exact

<NavLink exact activeClassName="selected" className="inactive" to="/PlanchesHomeScreen">
    <p className="textNavBar">Food</p>
</NavLink>