How to navigate from one page to another in react js on button click

How to navigate from one page to another in react js on button click Navigate from one page to another with react-router-dom

3 min read

Navigate from one page to another in react js
How to redirect to another page in react js on button click?

Installation

npm i react-router-dom

App.js
import React, { Component } from "react";
import NavBar from './components/Navbar';
import {BrowserRouter,Route} from "react-router-dom";

const Contactus=()=>{
return <h1>Contact us PAGE</h1>
}

const Home=()=>
{
return <h1>Home Page</h1>
}

const About=(props)=>{
return <div>
<h1>About Page</h1>
<button onClick={()=>props.history.push("/")}>GOTO HOMEPAGE</button>
</div>
}

export default class App extends Component {

render() {
return (
<BrowserRouter>
<NavBar/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contactus" component={Contactus}/>
</BrowserRouter>
);
}

}

Navbar.js

import React, { Component } from "react";
import {Link,withRouter} from 'react-router-dom';

class Navbar extends Component {
render() {
return (
<div>
<nav>
<div className="nav-wrapper" style={{backgroundColor:"orange"}}>
<a href="#" class="brand-logo">CheckProgramming</a>
<ul id="nav-mobile" className="right">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contactus">Contact us</Link></li>
</ul>
</div>
</nav>
</div>
);
}
}

export default withRouter(Navbar);

Add This in <head> Tag
index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>