CODEWITHSUNDEEP
reactjsdomnavigation
era s'q
era s'q

Reputation: 591

Navigate in the same page using react-route-dom

I have a very long page with There main components <Head/>, <Body/> and <Footer/> The header has a logo and a bunch of links. I want these link, when clicked scroll to that part of page which is inside the . I don't want to use refs. I want a react-render-dom implementation. In the internet I could find the solution fo either navigate to a new page or render single component. I want neither. I just want to scroll to that part of my page. I also found a package called react router hash link but I don't understant how to implement it. App component:

import React, { Component } from 'react'
import './App.css';
import Header from "./Components/LandingPage/Header";
import Footer from "./Components/LandingPage/Footer";
import Body from "./Components/LandingPage/Body";

export class App extends Component {
  render() {
   return (
   <div className="ParentContainer">
          <Header/>
          <Body/>
          <Footer/>
   </div>
   )
  }
}

export default App

This is the body component:

 import React, { Component } from 'react'
 import Intro from "./Intro";
 import Oneweek from "./Oneweek";
 import About from "./About";
 import Features from "./Features";
 import Mentors from "./Mentors";
 import Curriculam from "./Curriculam";
 import FAQ from "./FAQ";
 import Experience from './Experience';
 import Stories from './Stories'

 export class Body extends Component {
    render() {
      return (
        <div className="LandingPageBody">
            <Intro/>
            <Oneweek/>
            <About/>
            <Features/>
            <Mentors/>
            <Curriculam/>
            <Experience/>
            <FAQ/>
        </div>
    )
  }
}

export default Body

Upvotes: 0

Views: 412

Answers (1)

Pradip Kachhadiya
Pradip Kachhadiya

Reputation: 2235

May be useful:

<a href='#cart'">Go to cart</a>

<div id="cart">

     "I am cart"

<div>

Give the scroll behavior in your css...

html {
  scroll-behavior: smooth;
}

Upvotes: 1

Related Questions