i’m trying to get redirected from a component to another using a onClick in a button and yet i tried a lot of things nothing works
last thing i tried was the useHistory and push but maybe i’m using it wrong i don’t know the prooblem so here’s the code i tried
import React from 'react';
import { NavLink } from 'react-router-dom';
import"./home.css";
import { useHistory } from 'react-router-dom';
const Home = () => {
{/*this is where i called my useHistory object*/}
const history = useHistory();
return (
<React.Fragment>
<nav className="navbar navbar-expand-lg ">
<div className="container-fluid">
<i className="fas fa-paw fa-2x"></i>
<NavLink className="navbar-brand " to="/" >Pets Forever</NavLink>
<div className="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul className="navbar-nav mr-auto">
<li className="nav-item" >
<NavLink className="nav-link" to="/about">About Us</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/contact">Contact Us</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/login">Login</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/signUp">Sign Up</NavLink>
</li>
</ul>
</div>
</div>
</nav>
<div className="head-div">
<h1>Hi there!</h1>
<h1>Do you want buy me a toy?</h1>
<br/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, quia?</p>
<p>Excepturi atque possimus quas qui temporibus ratione</p>
<button type="button" className="btn btn-warning" onClick={()=>{this.history.push("/login") }
}>Shop Now</button>
</div>
</React.Fragment>
);
}
export default Home;