How ro use TanStack/router with react-scroll at same time

[mnlbox]

Hi guys,

This is my use case. I have an application containing two parts:
1- The home page is divided into different sections with some hash-links for each section, something like this:

export default function Home() {
  return (
    <>
      <div id="about">
        <About />
      </div>
      <div id="services">
        <Services />
      </div>
...
    </>
  )
}

The URLs for this page are something like this:

• / for Home
• /#about for the about section
• ...
  And I added these URLs using Link component from @tanStack/react-router package like below to my app navigation menu component:

<Link to="/" hash="about" activeOptions={{ includeHash: true }}>
                  About
                </Link>

2- A dedicated page for contact-us with URL /contact and I added that to my navigation like below:

<Link to="/contact">Contact Us</Link>

Now to improve UX I wanna add two features to my app. First of all, I need smooth scrolling like the below:
1- When the current page is / and a user clicks on any link with hash-link in the menu I want to scroll to that section smoothly without jumping.
2- When the current page is /contact and for example, a user clicks on a /#about link. I want to first navigate to the home page (/) and then scroll to the about section.

To achieve this feature as I searched I have to use a package like react-scroll this package also has a Link component but I'm not sure how I can use this Link component with Link component from @tanStack/react-router together at the same time. I know I can use an alias in my import command but it's still not clear should I add Link component from react-scroll as a child of my router link or as a parent?

The second improvement I want to apply is for link spy and again supported by react-scroll so I think I can achieve that if I can solve the first problem.

Anyone here has any idea or experience to implement something like this?