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