Как сделать редирект скрола с одной страницы на другой в react-scroll?

Question

[Артём Белых]

Здравствуйте, есть меню:

<List sx={{display: "flex", marginLeft: "30px"}}>
                                    {pages.map((page, index) => (
                                        <ListItemButton key={index}>
                                            <ListItemIcon>
                                                <LinkScroll activeClass="active" spy={true}
                                                            smooth={true}
                                                            offset={-100}
                                                            duration={500}
                                                            style={{color: "black", textDecoration: "none"}}
                                                            to={page.tags}><ListItemText id={"#" + page.tags}
                                                                                         sx={{fontFamily: "Mulish"}}>{page.title}</ListItemText></LinkScroll>
                                            </ListItemIcon>
                                        </ListItemButton>
                                    ))}
                                </List>

На главной страницы скрол на элемент работает нормально, но мне нужно перейти по нажатии на ссылку на главную и перенаправить на тот элемент на который нажал.
Пробовал так:

<LinkScroll activeClass="active" spy={true}
                                                            smooth={true}
                                                            offset={-100}
                                                            duration={500}
                                                            style={{color: "black", textDecoration: "none"}}
                                                            to={"/" + page.tags}><ListItemText id={"#" + page.tags} //так не прокатывает он не переходить, пишет rget Element not found

                                                                                         sx={{fontFamily: "Mulish"}}>{page.title}</ListItemText></LinkScroll>

Подскажите пожалуйста как это можно сделать.

Comments

[Артём Белых]

Evgenii, Не совсем понял что такое с "Хешем в ссылке". Можете написать по подробнее про якорные ссылки в react-scroll пожалуйста.
Я так понял вы про это.
И вот ещё такие решения.(Тоже хеш ссылки, про это?)

[Артём Белых]

Evgenii, Так не получается

<LinkScroll activeClass="active" spy={true}
                                            smooth={true}
                                            offset={-100}
                                            duration={500}
                                            style={{color: "black", textDecoration: "none"}}
                                            to={"#" + page.tags}><ListItemText id={"#" + page.tags} // здесь добавляю # 
                                                                         sx={{fontFamily: "Mulish"}}>{page.title}</ListItemText></LinkScroll>

на главной работает но если перейти на другую страницу то от туда навигация не работает

[Артём Белых]

Evgenii, Мне нужно с страницы "Статьи" перейти на главную страницу и на главной страницы есть раздел "Статьи" мне нужно перейти к нему.

[Артём Белых]

Evgenii, Да id="articles" у меня на главной есть(на главной плавный скрол к этому блоку есть), но с "Статьи" не переходит на главную и не скролится, может я не правильно к линку добавляю # !??

[Артём Белых]

Evgenii, Решил частично проблему

LinkScroll activeClass="active" spy={true}
                                                            smooth={true}
                                                            offset={-100}
                                                            duration={500}
                                                            style={{color: "black", textDecoration: "none"}}
                                                            to={page.tags}>
                                                    <ListItemText onClick={() => navigate('/#' + page.tags)} id={"#" + page.tags} sx={{fontFamily: "Mulish"}}>
                                                        {page.title}
                                                </ListItemText>
                                                </LinkScroll>

Добавил хук useNavigate() и повесил onClick на кнопки навигации onClick={() => navigate('/#' + page.tags)} на главную переходит но на блоки нужные нет

[Артём Белых]

Evgenii, у меня LinkScroll, так не работает.

[Артём Белых]

Evgenii, Не понял :) Тут поподробнее... :))))

[Артём Белых]

Evgenii, А в контексте Реакта и реакт скрола, как это можно сделать?