[React] How to scroll into view from different page

I have a single landing page. I want to scroll section of the page clicking on navbar. Generally, it is done with id hyperlink in the navbar for the section with pure HTML CSS. However in this case sections of the home page are components.

App.js

      <Navbar />
      <Switch>
        <Route exact path="/" render={props => (
          <React.Fragment>
            <MainScreen />
            <AboutMain />
            <Service />
            <Product />
            <AboutUs />
            <Team />
            <Director />
            <ContactUsMain />
          </React.Fragment>
        )} />

Links are in navbar component

            <Navbar light expand="md">
                <NavbarBrand href="/">Logo</NavbarBrand>
                <NavbarToggler onClick={this.toggle} />
                <Collapse isOpen={this.state.isOpen} navbar>
                    <Nav className="ml-auto" navbar>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/components/">Home</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">Company</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">About</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">Achievers</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">Contact Us</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/" onClick={this.windowLocation}>Distributer Login</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <Link to="/cart"><Button style={cartBtn} color="primary" >Your Cart</Button></Link>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>

I want like this. Clicking on “About” on navbar it scroll down to “AboutMain” component in home page…
Also If I am on different page like on cart then I click on about button in navbar. It should navigate to the home page and scroll down to about section.

As I understand you have different component like Service Product like that., What you want is whenever user click on the link they have to redirected to specific page.
you can do this by two way.

First way using browser router 
---------------------------
/*I can explain with another example
index.js is my parent component 
what you see below that is the code you have to implement
*/
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import {BrowserRouter} from 'react-router-dom'

/* dont forget to install react-router-dom
 how to install react-router-dom?
npm i react-router-dom
or yarn install react-router-dom (i don't use yarn so you have to cross check)
  
*/
ReactDOM.render( <BrowserRouter><App/></BrowserRouter> , document.getElementById('root'));

// I have another component which is app.js  that I imported to index.js file..

// 
//below you can see the code which i wrote in app.js file

import React, { Component } from 'react'
import Service  from './service.js'
import Product   from './ Product.js'
import Home from './homepage.js'
import Navbar from ;./navbar.js
// import all of your remaining component
import {Route,Switch} from 'react-router-dom'
class App extends Component {
render(){
return(
<div>
<React.Fragment>
<Navba/>
//this navbar should be outside of Switch
<Switch>
<Route path='/' strict exact component={Home}/>     
<Route path='/service' strict exact component={Service}/>     
<Route path='/Product' strict exact component={Product}/>     


</Switch>

</React.Fragment>
      

</div>
)


}

}
export defaul App
//up to this is app component code 
//below is the code of navbar componet
import React from 'react'
import {Link , NavLink} from 'react-router-dom
function Navbar(){

return(
<div>
// You can use Navlink or link
<li>
<Navlink to ='/service'> service </NavLink>
</>
<li>
<Navlink to ='/product'> product </NavLink>
</>


</div>
)

}

export default Navbar

This is the first way
.
This is the second way using react state

code in index.js file
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';


ReactDOM.render( <App/>, document.getElementById('root'));

code in App.js 

import React, { Component } from 'react'
import Service  from './service.js'
import Product   from './ Product.js'
import Home from './homepage.js'
import Navbar from ;./navbar.js

class App extends Component {
state={
showHomeComponet:true, showServiceComponent:false,,
showProductComponet:false
}

showHomeComponetHandler=()=>{
this.setState({...this.state,showHomeComponet:true, showServiceComponent:false,,
showProductComponet:false})

}
showServiceComponet=()=>{
this.setState({...this.state,showHomeComponet:false, showServiceComponent:true,,
showProductComponet:false})


}

showProductComponet=()=>{

this.setState({...this.state,showHomeComponet:false, showServiceComponent:false,,
showProductComponet:true})


}

render(){
const {
showHomeComponet:, showServiceComponent:,,
showProductComponet
}=this.state
const home= showHomeComponet && </Home>
const product=showProductComponet && </Product>
const service = showServiceComponent: && </Service>
const navbar=(</Navbar  showHomeComponetHandle={this.showHomeComponetHandle}
showServiceComponet={this.showServiceComponet}
showProductComponet={this.showProductComponet}

// now you can acces this method in navbar componet

>)

/*
what exactly idea here is that, as we set the state

showHomeComponet:=true
and we set another condition when ever showHomeComponet value is true. then only it display home component because
const home= showHomeComponet===true  && </Home>
( const home= showHomeComponet===true  && </Home && const home= showHomeComponet  && </Home>
> both statement is equal
)
all three method (showProductComponet, remaining two method )
we use for set the value of the state associated with that componet to be true
we can pass this method to navbar component from their we can use an onClick event to change the value 
you can say may be conditional rendering
*/

return(<div>
{navbar}
{home}
{product}
{service}


</div>)

}



}
export default App

Code for navbar.js
import React, from 'react'
const navbar=(props)=>{

const {showHomeComponetHandler,showServiceComponet
,showProductComponet}=props

return (
<div>
<button onClick={showHomeComponetHandler}>HOME</button>
<button onClick={showServiceComponet}> SERVICE</button>
<button onClick={showProductComponet}>PRODUCT </button>

</div>
)

}
expoet default navbar
1 Like