Мой вопрос такой:
в следующем коде
У меня есть NavBar, который работает нормально
Вот проблема
, когда я нажмите на три первых элемента, все в порядке, только когда я нажимаю на «еда» или «выстрелы», мой 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;