Why does NavLink assign the class "active" to all anchor links on a page?

Question

JavaScript

The site has a landing page, which I wanted to navigate using anchor links.
But when you go to the address "/", the class "active" acquires all anchors, but I would like that when you click on the anchor "/ # 2", the class "active" would have only the link "Students Stories" and so on. Why is this happening and how can it be fixed?

<li>
    <NavLink className='nav__elem' to="/"><img src="images/1.png" className='nav__img' alt="О школе"/>О 
    школе</NavLink>
</li>
<li>
    <NavLink className='nav__elem' to="/#1"><img src="images/1.png" className='nav__img' 
     alt="Курсы"/>Курсы</NavLink>
</li>
<li>
    <NavLink className='nav__elem' to="/#2"><img src="images/1.png" className='nav__img' alt="Истории 
    учеников"/>Истории учеников</NavLink>
</li>
<li>
    <NavLink className='nav__elem' to="/#3"><img src="images/1.png" className='nav__img' 
    alt="Контакты"/>Контакты</NavLink>
</li>

Answer 1

Because the link doesn't change. Yes, and it is not correct to use such routing. For anchors, use simple links.