I am making a single scroller page using React and want to navigate to a specific section of the page. In HTML we use an href and anchor tag to achieve this interaction.
I found a React library called react-scroll but I do not know how to link each component in different folders from the a link in the NavBar component. My NavBar has multiple links for scrolling to a section/ component. Any help would really be appreciated!
import React, { Component } from "react";
import { Link, animateScroll as scroll } from "react-scroll";
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark">
<Link className="navbar-brand" to="/">
CMD <span>Custom Movie Database</span>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item ">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Search
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Category
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Popular
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Trailer
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Article
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Contact
</Link>
</li>
</ul>
</div>
</nav>
);
}
}
export default Navbar;
This is Home Component where all component is added
class Home extends React.Component {
render() {
return (
<React.Fragment>
<Navbar />
<Showcase />
<FormWrapper />
<CategoryList />
<MovieGrid />
<MovieTrailer />
<ArticleGrid />
<Footer />
</React.Fragment>
);
}
}
react-scroll
is a great library - let me try and explain how I understand it.
Wherever I need a Link
that scrolls to a certain element, I import that link, define it, and render it:
import React, { Component } from 'react'
import Scroll from 'react-scroll'
const ScrollLink = Scroll.ScrollLink
class Navbar extends Component {
render() {
return (
<nav>
<ScrollLink
to="example-destination"
spy={true}
smooth={true}
duration={500}
className='some-class'
activeClass='some-active-class'
>
Link Text Goes Here
</ScrollLink>
</nav>
)
}
export default Navbar;
import React, { Component } from 'react'
import { Element } from 'react-scroll'
export default function () {
return (
<React.Fragment>
<Element id='example-destination' name='example-destination'>
// wrap your content in the Element from react-scroll
</Element>
</React.Fragment>
)
}
Making sense? Let me know if I can expand on this further!