0

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"

Kaneki21
  • 1,323
  • 2
  • 4
  • 22
Jonas Bjørn Pedersen
  • 35
  • 6
  • I don't think `react-scroll` would be the correct choice to handle this problem. For your second issue, you don't have `RouterLink` to route the page to `Content` component hence element not found. I think you should write your own logic in the navbar component to route to proper pages at first then scroll to respective section – Kaneki21 Oct 15 '22 at 11:30

2 Answers2

2

I figured it out finally - after initially giving up. Here is my test example: https://codesandbox.io/s/sharp-chatterjee-rdlsyl. Each of the sub components of the Content component has been given a name attribute on their container. And every thing else is done from the Navigation component. It is not the cleanest code, and I will look to clean it up. But now it works.

I had another look a the link posted by Varun Kaklia, and used the live code example from that link along side this post about migrating from useHistory to useNavigate.

Jonas Bjørn Pedersen
  • 35
  • 6
1

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

Varun Kaklia
  • 366
  • 4
  • 9
  • I would like some additional help, thank you! I tried changing the Navigation component. Changes updated here: https://codesandbox.io/s/cool-currying-i89zw8. Now the highlighting works, but the routing does not quite work. From New Page, it only routes to the Home section, no matter which of the links (Home, About & Contact) is clicked. – Jonas Bjørn Pedersen Oct 15 '22 at 13:33
  • Hey @JonasBjørnPedersen, this happens because router perform only routing part to main page. To achieve what you need then please check how to use # href in a page routing.. If you still facing issue just lemme know, will help you and if you got your answer just tick on got answer. Thanks – Varun Kaklia Oct 16 '22 at 03:31
  • Well I give up! I'm either to stupid to understand how to make it work, or it just isn't possible to achieve. – Jonas Bjørn Pedersen Oct 17 '22 at 09:52