Untitled

import React from "react";
import { BrowserRouter as Router, Route, Routes, Link, BrowserRouter } from "react-router-dom";



const Homepage=()=>{
  return <div className="flex justify-center items-center">
    <h1>Homepage</h1>
  </div>
}

const Aboutpage = () => {
  return (
    <div className="flex justify-center items-center  flex-col">
      <a href="/" className="border p-4 bg-red-500 text-white">
        Home
      </a>

      <Link className="border p-4 bg-red-500 text-white" to={"/"}>
        Home link with React router
      </Link>
      <h1>Aboutpage</h1>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
      <div className="p-4 bg-black text-white">
        <ul className="flex gap-4">
          <li className="p-3 hover:bg-gray-500">Home</li>
          <li className="p-3 hover:bg-gray-500">About</li>
          <li className="p-3 hover:bg-gray-500">Contact</li>
        </ul>
      </div>

      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/aboutpage" element={<Aboutpage />} />
      </Routes>

      <div className="p-4 bg-black text-white">
        footer
      </div>
    </BrowserRouter>
  );
}

export default App;