React-router: How to do anchor aka "hash" links?

[benknight]

Say I have some <div id="my-section"> ... </div>, how do I link to this section of the page? This is a really useful feature of the web.

[mouhsinelonly]

+1

[benknight]

I can't remember if I closed this because I found a duplicate issue or if I actually figured out how to do it. Anybody know the status of this feature?

[igl]

+1

I use history locations only and want the original behavior for hashlinks back!

[davis]

how do you do this?

[zdavis]

+1

[pratyushmittal]

@darobin Can you please provide details about how did you fix the normal anchor links? Using a[href="#some_id"] still calls createBrowserHistory() leading to a full React re-render.

[darobin]

@pratyushmittal I haven't checked but I believe in my case it is also still re-rendering. After all, it does change the route. But it works: the browser navigates to the hash, which is the desired behaviour. In my case the re-render isn't an issue, the route only affects topmost components, the rest won't see the change.

[amadeogallardo]

I do see as problematic that the re-render is triggered, since navigating within sections on the same page then causes an unnecessary performance overhead.

Is there any supported way to prevent re-rendering while using named anchors to sections on the same page?

[pepavesely]

Any progress on this subject? I wonder why the issue is closed. React is still re-rendering pages.

[nujhong]

As a workaround, I think you can respond to LOCATION_CHANGE and perform reconciliation based on the hash property of the payload.

[akhilaudable]

Any progress here? If there is duplicate issue, can anyone please provide URL of that issue?