Nav Links work only from homepage

[Manvityagi]

[ArunTeltia]

having a look at this one

[Manvityagi]

having a look at this one

Okay

[ArunTeltia]

Okay so what I got to know after a little bit code reading is that The id is being manually set for each sections and when we get to different section the id and the navbar links don't match

Three solutions 1.We can change the navbar according to the router and then add a id for each of the component and it will start to work fine 2. We can simply redirect the user to the homepage whenever someone click on the navbar, that will work fine but I don't know that will look good tho 3. We can simply change the content of the navbar such that the data in the navbar no longer responsible for scrolling but instead it focus more on changing the different page and routes(Basically the trivial use of the navbar to change the location of the navbar)

Let me know if you have another solution, Then I can start working on this issue

[Manvityagi]

Okay so what I got to know after a little bit code reading is that The id is being manually set for each sections and when we get to different section the id and the navbar links don't match

Three solutions 1.We can change the navbar according to the router and then add a id for each of the component and it will start to work fine 2. We can simply redirect the user to the homepage whenever someone click on the navbar, that will work fine but I don't know that will look good tho 3. We can simply change the content of the navbar such that the data in the navbar no longer responsible for scrolling but instead it focus more on changing the different page and routes(Basically the trivial use of the navbar to change the location of the navbar)

Let me know if you have another solution, Then I can start working on this issue

I think first solution would add a lot of unnecessary code. Second one is quickly doable thing and I think okay for serving the requirement.

I didn't quite get, what you suggested in third though.

[ArunTeltia]

The third one was like this in the home page there are these section

Home What we Do? About Us Reviews FAQs Contact us

We can change the navbar content according to the page Like for route "/codemaps" there are 4 sections Why CodeMap? Query? Pay? Our CodeMaps

And the functionality for the button will be the same as home

This was what i meant by the third point

[ArunTeltia]

For now Working on the first solution then

[ArunTeltia]

Can we use react scroll npm for this @Manvityagi di

https://stackoverflow.com/questions/54832696/scrolling-to-a-component-on-the-same-page-using-react-router/54833576

[abdus]

you could do something like this:

  const history = useHistory();

  function handleClick(elementId) {
    if (window.location.pathname !== "/") {
      history.push(`/`);

      let element = window.document.getElementById(elementId);

      setTimeout(() => {
        // wait for React to render component. maybe add a time-limit to this while loop as well
        while (!element) {
          element = window.document.getElementById(elementId);
        }

        element && element.scrollIntoView();
      });
    }

then attach this event handler to onClick method of <Link> tag in Navbar.js component. I used useHistory hook, so that the browser does not refresh the page. here's a full example: Navbar.js

[ArunTeltia]

Vahi dekh raha tha bhaiya thank you so much for this @abdus 🙌💯😆