сохранить позицию NavBar после NavLink React

Question

вот моя проблема

У меня есть NavBar, который содержит NavLink, который работает правильно, когда я нажимаю на ссылку, поэтому новый маршрут, мой NavBar начинается снова с начала

в моем Например, если мы удалим ссылки, то navBar работает следующим образом: у меня появляется дисплей 1 2 3, когда я go справа или слева (в слайде), мы видим 2 3 4, затем, когда я нажимаю 4, панель навигации становится 4 5 6, так что все работает нормально

, за исключением того, что я хотел бы, чтобы он работал с NavLink, с NavLink он работает следующим образом 1 2 3, если я нажимаю 3, моя ссылка работает правильно, за исключением того, что мой Navbar начинается снова с 1 2 3 вместо 3 4 5

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

 export default class FocusOnSelect extends Component {
  render() {
   const settings = {
   className: "sliderShadowBoxNavBar",
   focusOnSelect: true,
   infinite: true,
   slidesToShow: 3,
   slidesToScroll: 1,
   speed: 500
};
return (
  <div>
    <Slider {...settings}>
      <div className='containerNavBar'>

         <NavLink  exact activeClassName="selected" className="inactive" to="/Homescreen">
           <p className="textNavBar">1</p>
        </NavLink>
      </div>
      <div className='containerNavBar'>
      <NavLink activeClassName="selected" className="inactive" to="/CocktailsHomeScreen">
           <p className="textNavBar">2</p>
         </NavLink>
      </div>
      <div className='containerNavBar'>
      <NavLink exact activeClassName="selected" className="inactive" to="/VinHomeScreen">
           <p className="textNavBar">3</p>
         </NavLink>
      </div>
      <div className='containerNavBar'>
      <NavLink activeClassName="selected" className="inactive" to="/PlanchesHomeScreen">
           <p className="textNavBar">4</p>
        </NavLink>
      </div>
      <div className='containerNavBar'>
      <NavLink activeClassName="selected" className="inactive" to="/AlcoolFortHomeScreen">
           <p className="textNavBar">5</p>
         </NavLink>
      </div>
      <div className='containerNavBar'> 
      <NavLink activeClassName="selected" className="inactive" to="/ShotScreen">
           <p className="textNavBar">6</p>
        </NavLink>
      </div>
      <div className='containerNavBar'> 
        <NavLink activeClassName="selected" className="inactive" to="/SoftHomeScreen">
           <p className="textNavBar">7</p>
         </NavLink></div>
    </Slider>
  </div>
  );
 }
 }

спасибо за помощь Neff