Unable to Scroll to Div using <a href=“#”>]

[Technologeek]

I'm using this library to get the scroll to div effect.However after following the documentation ,I don't seem to get it working.Code :

<RewardContainer>
                <div className="pageWrapper">
                    <div className="rewardInfoWrapper">
                        <div className="tabsContainer">
                            <div>
                                <Scrollspy
                                    items={[
                                        "section-1",
                                        "section-2",
                                        "section-3"
                                    ]}
                                    currentClassName="is-current"
                                >
                                    <li>
                                        <a
                                            href="#section-1"
                                            className="c-side-nav__link"
                                        >
                                            Streak
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            href="#section-2"
                                            className="c-side-nav__link"
                                        >
                                            Gems
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            href="#section-3"
                                            className="c-side-nav__link"
                                        >
                                            Xp Points
                                        </a>
                                    </li>
                                </Scrollspy>
                            </div>
                        </div>
                        <div className="columnContainer">
                            <div className="tabInfo">
                                <div>
                                    <div id="section-1">
                                            <p>
                                                This is Section 1
                                            </p>
                                    </div>
                                    <div id="section-2">
                                            <p>
                                                This is Section 2
                                            </p>
                                        </div>
                                    <div id="section-3">
                                            <p>
                                                This is Section 3
                                            </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </RewardContainer>

The issue is ,my a href="#id" tag reloads the browser and treats id as a route instead of scrolling to that div's id.For instance,clicking on the third li element reloads the browser with http://localhost:7000/#section-3 in the url.

[lancasja]

If you're using react-router you'll need to also use react-router-hash-link: https://github.com/rafrex/react-router-hash-link. Just install, import then replace <a href="#achor">...</a> with <HashLink to="#anchor">...</HashLink> and all should be good!

[smshahrukh]

@Technologeek Did you find any work around for this? I am also having this issue. When the browser reloads, it does not scroll to the desired section, rather scrolls to top.

[Technologeek]

@smshahrukh I haven't really tried out router-hash-link as suggested above.Did you give that a try ?

[smshahrukh]

@Technologeek Yes I tried but it is of no use. It just give you a smooth scroll to the element. It doesn't provide the desired functionality.

[aravindsagar]

Can confirm that react-router-hash-link solves the issue. This is not an issue with ScrollSpy, but an issue in general if you're using HashRouter.