Как обеспечить правильную навигацию по URL-адресам с помощью React-Router-DOM и одностраничных ссылок прокрутки в ReactJ ⇐ Javascript

[Гость]

Я использую ReactJs с React-Router-DOM. У меня есть панель навигации со ссылками, такими как «домой», «о нас», «услуги», «портфолио» и «контакты».

Ссылки «Главная» и «О программе» представляют собой ссылки для прокрутки одной страницы, а «услуги», «портфолио» и «контакты» находятся на разных страницах. Я использую тег привязки вместо тега Link из «react-router-dom», потому что тег Link не поддерживает ведут себя ожидаемым образом для одностраничных ссылок прокрутки.

Теперь, когда я перехожу от ссылки «домой» к ссылке «о», текущий URL-адрес меняется с domain на domain/#about. Затем, если я перейду с domain/#about на страницу «услуги», текущий URL-адрес изменится с domain/#about на domain/services.
Вот тут и начинается моя проблема:
если я нахожусь на какой-либо странице «услуги», «портфолио» или «контакты» и пытаюсь вернуться на главную страницу и страницу «О нас», например, когда текущий URL-адрес — domain/services и я нажимаю ссылку «о», текущий URL-адрес меняется с domain/services на domain/services#about. Он не возвращается в домен/#about; вместо этого он меняется на домен/сервис#о.
Это то, что я делаю в своем компоненте Navbar import React, { useEffect } из «реагировать»; import {Link, useLocation} из "реагировать-маршрутизатора-dom"; импортировать "./css/navbar.css"; импортировать логотип из "./Logo"; функция Navbar (реквизит) { константное местоположение = useLocation(); useEffect(() => { console.log(местоположение); }, [расположение]); const singlePageScrollLinks = () => { возвращаться ( [*] Дом [*] О ); }; возвращаться ( [*]+91 9876543210 [*]qwerty@mail.com [*]

• {singlePageScrollLinks()} Услуги
• портфолио
• Контакт

); } экспортировать навигационную панель по умолчанию;