javascriptreactjsreact-router-domreact-scroll

Using both react-router-dom and react-scroll


I'm trying to make a simple navbar, where some of the links link to sections in the same component(page), using react scroll and then have other links link to a different component(route page). Hope the makes sense?

Here is a simple version: https://codesandbox.io/s/late-firefly-x109rk

In this example I have four links. The idea is to have Home, About and Contact scroll to the corresponding section and have new page open a new page using the Router.

There are currently two problems with this example:

1: if Home, About or Contact is active when going to the new page they stay active, while the new page also gets active.

2: When trying to go back from NewPage to Home, About or Contact I get "target Element not found"


Solution

  • i got answers of your both questions. The issue is scrollLink, yes this create issue for router, because router doesn't know from where he get home, this isn't available on same page. Also check the given link- React Link with React Scroll

    Hope you understand and solve your issue. If you still facing issue, just lemme know i will help you more. Thanks