Menu
I want the page to scroll down to my anchor tags when a user navigates to it through an anchor link.
I'm using react-router 4 and I've defined things as follows:
navbar:
export default (props) => { const { updateModal, updateRoute, } = props return( <Navbar fluid collapseOnSelect> <Nav> <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret> <MenuItem eventKey="4.1"> <Link to='/solution#ipos'>TESTING ANCHOR</Link> </MenuItem> ... some route:
export default class extends Component { constructor() { super() this.state = { isLoading: true } } render() { return ( <Grid className='solutions' fluid> <Row className='someClass'> <div> <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2> ... I can see the hash anchor tag in the url and in my redux store when I click on the anchor link in the navebar, and it indeed navigates to the new route, but it doesn't scroll down to the tag itself.
Is it up to me to create the scroll function or how is it supposed to work exactly?
341
In React, relative URLs should always be handled by the link tag provided by the React Router, and pure anchor tags should only be used for absolute paths. You can also think of relative URLs as in-app navigation, for example navigating to a particular route of the app and absolute paths as external links.
To use normal anchor links with React Router, we can use the Link component. import React from "react"; import { Link } from "react-router-dom"; const Comp = () => { //... return ( <Link to={{ pathname: "/this-view-path", hash: "#faq-1" }}>Question 1</Link> ); };
The component allows you to do more than the normal link element. For instance, because it's a React component you have the benefits of having a state and what not (if you want that). You can see more documentation on here.
To scroll down to your anchor tags, you need to install React Router Hash Link, with:
npm install --save react-router-hash-link then import Hash Link:
import { HashLink as Link } from 'react-router-hash-link'; and then use Hash Link, for example:
<Link to="/pathLink#yourAnchorTag">Your link text</Link> and at the destination component, for example:
<div id= "yourAnchorTag"> <p>Linked to here<p> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
