Home

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

Tutorial Rocket
Navigate from one page to another in react js
How to redirect to another page in react js on button click?
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>

You may like these posts