how can i get redirected from component to another by using a button

Question

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;

this is also my app.jsx file i've edited the question so that to see all the code written

import React, { Component } from 'react';
import Home from './home';
import {BrowserRouter , Route, Routes} from "react-router-dom"
import Login from './login';
import Register from './createAccount';
import About from './about';
import Contact from './contact';


import"./app.css";



class App extends React.Component {
render() { 
    return (
    <React.Fragment>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/login" element={<Login />} />
                <Route path="/signUp" element={<Register />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="/about" element={<About />} />



            </Routes>
         </BrowserRouter>
        
    </React.Fragment>
    
    );
}
}

export default App;

Answer 1

useHistory isn't in React-router-dom v6, it was in v5, so remove it completely from your code and use useNavigate instead.

import { useNavigate } from "react-router-dom";

You have to actually create those urls in app.js or your main js file. You will need to use <Routes/> tag.

so it can be something like this

    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="login" element={</login>} />
      <Route path="signUp" element={</signUp>} />
      <Route path="contact" element={</contact>} />
      <Route path="about" element={<about/>} />
    </Routes>

Also, wrap your index.js file with <BrowserRouter/> tags Remove the from App.js completely

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

And now your NavLink will work and navigate to those components we mentioned above.

For the button to redirect you the /login you will import useNaviagate from react-router-dom then initialize it inside your function

let navigate = useNavigate();

on your button onClick , you have to call navigate function with the desired destination like this

<button type="button" className="btn btn-warning" onClick={() => navigate("/login")}/>Shop Now</button>

check this for more info about Navigation in v6. docs