Use Navigate & BrowserRouter

May 30 2026

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import About from "./About";
import Contact from "./Content";
import Home from "./Home";

function App(){

  return(
<>
<BrowserRouter>

<Link to ={"/"}>Home</Link>
<Link to ={"/About"}>About</Link>
<Link to ={"/Contact"}>Contact</Link>

< Routes >
  <Route path='/' element={<Home />} / >
  <Route path='/About' element={<About/ > } /  >
  < Route path='/Contact' element={< Contact / > } / >


</Routes>
</BrowserRouter>

{/* <Home /> */}
{/* <About/>  */}


</>
  )
}
export default App;

Link creates navigation links:
Home
About
Contact

Home

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

function About() {

  const navigate = useNavigate();


  function handleHome() {


    navigate("/")
  }

  return (

    <>
      About

      <button onClick={handleHome}>BACK TO HOME</button>
    </>
  )
}
export default About;

About

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

function About() {

  const navigate = useNavigate();


  function handleHome() {


    navigate("/")
  }

  return (

    <>
      About

      <button onClick={handleHome}>BACK TO HOME</button>
    </>
  )
}
export default About;

Content

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

function Contact(){

 const navigate = useNavigate();
  function handleContact() {
    navigate ("/About")
  }
  return(

    <>Contact

    <button onClick={handleContact}>Back About</button>
    </>
  )
}
export default Contact;