Not working with Link component from react-router-dom

[AlexandreHBeNext]

Hello, first, thanks for the library.

I'm trying to use it on my website but when I use a Link component (from react-router-dom) to redirect to a ScrollableAnchor, it's not working at all even if I use the goToAnchor on the onClick attribute. While it's working great with a <a> tag.

Here is my code (The only working one is Test3):

export default class MainNav extends Component {
  scrollToAnchor = (anchor) => {
    goToAnchor(anchor, true)
  }

  render() {
    return (
      <div>
        <Nav>
          <Container lg>
            <NavContent>
              <LogoContainer>
                <Link to={routes.home}>
                  <MainLogo width="25px" height="25px" />
                </Link>
              </LogoContainer>

              <LinksContainer>
                <Link to="/#contactBlock">Test1</Link>
                <Link onClick={this.scrollToAnchor('#contactBlock')}>Test2</NavLink>
                <a href="/#contactBlock">Test3</a>
              </LinksContainer>
            </NavContent>
          </Container>
        </Nav>
      </div>
    )
  }
}

And here is the code that contain the ScrollableAnchor component:

export default class Home extends Component {
  render() {
    return (
      <div>
        <MainHeader />
        <Container>
          <ScrollableAnchor id="aboutBlock">
            <About />
          </ScrollableAnchor>
          <ScrollableAnchor id="projectsBlock">
            <Projects />
          </ScrollableAnchor>
        </Container>
        <ScrollableAnchor id="contactBlock">
          <Contact />
        </ScrollableAnchor>
        <EasterEgg />
        <MainFooter />
        <SplashScreen />
      </div>
    )
  }
}

Any idea? Am I doing something wrong?