Untitled
unknown
plain_text
10 months ago
1.2 kB
6
Indexable
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;
Editor is loading...
Leave a Comment