Router

React JS

npm install react-router-dom

Home page

import React from "react";

function Home() {
  return (
    <div className="page">
      <h1>Home Page</h1>
      <p>Welcome to the Home page.</p>
    </div>
  );
}

export default Home;

About page

import React from "react";

function About() {
  return (
    <div className="page">
      <h1>About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
}

export default About;

Contact page

import React from "react";

function Contact() {
  return (
    <div className="page">
      <h1>Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
}

export default Contact;

App page

import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import "./App.css";

function App() {
  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

CSS Router

React TS

npm install react-router-dom

Home page

import React from "react";

const Home: React.FC = () => {
  return (
    <div className="page">
      <h1>Home Page</h1>
      <p>Welcome to the Home page.</p>
    </div>
  );
};

export default Home;

About page

import React from "react";

const About: React.FC = () => {
  return (
    <div className="page">
      <h1>About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
};

export default About;

Contact page

import React from "react";

const Contact: React.FC = () => {
  return (
    <div className="page">
      <h1>Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
};

export default Contact;

App page

import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import "./App.css";

const App: React.FC = () => {
  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

CSS Router

React JS + Tailwind + flex

npm install react-router-dom

Home page

import React from "react";

function Home() {
  return (
    <div className="text-center p-8">
      <h1 className="text-3xl font-bold mb-4">Home Page</h1>
      <p>Welcome to the Home page.</p>
    </div>
  );
}

export default Home;

About page

import React from "react";

function About() {
  return (
    <div className="text-center p-8">
      <h1 className="text-3xl font-bold mb-4">About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
}

export default About;

Contact page

import React from "react";

function Contact() {
  return (
    <div className="text-center p-8">
      <h1 className="text-3xl font-bold mb-4">Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
}

export default Contact;

App page

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

function App() {
  return (
    <Router>
      <div className="min-h-screen bg-gray-100">
        <nav className="bg-gray-800 p-4">
          <ul className="flex justify-center space-x-4">
            <li>
              <Link to="/" className="text-white font-semibold">
                Home
              </Link>
            </li>
            <li>
              <Link to="/about" className="text-white font-semibold">
                About
              </Link>
            </li>
            <li>
              <Link to="/contact" className="text-white font-semibold">
                Contact
              </Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

React TS + Tailwind + flex

npm install react-router-dom

Home page

import React from "react";

const Home: React.FC = () => {
  return (
    <div className="text-center p-8">
      <h1 className="text-3xl font-bold mb-4">Home Page</h1>
      <p>Welcome to the Home page.</p>
    </div>
  );
};

export default Home;

About page

import React from "react";

const About: React.FC = () => {
  return (
    <div className="text-center p-8">
      <h1 className="text-3xl font-bold mb-4">About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
};

export default About;

Contact page

import React from "react";

const Contact: React.FC = () => {
  return (
    <div className="text-center p-8">
      <h1 className="text-3xl font-bold mb-4">Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
};

export default Contact;

App page

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

const App: React.FC = () => {
  return (
    <Router>
      <div className="min-h-screen bg-gray-100">
        <nav className="bg-gray-800 p-4">
          <ul className="flex justify-center space-x-4">
            <li>
              <Link to="/" className="text-white font-semibold">
                Home
              </Link>
            </li>
            <li>
              <Link to="/about" className="text-white font-semibold">
                About
              </Link>
            </li>
            <li>
              <Link to="/contact" className="text-white font-semibold">
                Contact
              </Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

React JS + Tailwind + grid

npm install react-router-dom

Home page

import React from "react";

function Home() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">Home Page</h1>
      <p>Welcome to the Home page.</p>
    </div>
  );
}

export default Home;

About page

import React from "react";

function About() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
}

export default About;

Contact page

import React from "react";

function Contact() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
}

export default Contact;

App page

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

function App() {
  return (
    <Router>
      <div className="grid grid-cols-4 min-h-screen">
        <nav className="bg-gray-800 col-span-1 p-4">
          <ul className="flex flex-col space-y-4">
            <li>
              <Link to="/" className="text-white font-semibold">
                Home
              </Link>
            </li>
            <li>
              <Link to="/about" className="text-white font-semibold">
                About
              </Link>
            </li>
            <li>
              <Link to="/contact" className="text-white font-semibold">
                Contact
              </Link>
            </li>
          </ul>
        </nav>
        <div className="col-span-3 bg-gray-100 p-8">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

React TS + Tailwind + grid

npm install react-router-dom

Home page

import React from "react";

const Home: React.FC = () => {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">Home Page</h1>
      <p>Welcome to the Home page.</p>
    </div>
  );
};

export default Home;

About page

import React from "react";

const About: React.FC = () => {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">About Page</h1>
      <p>Learn more about us on this page.</p>
    </div>
  );
};

export default About;

Contact page

import React from "react";

const Contact: React.FC = () => {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">Contact Page</h1>
      <p>Get in touch with us through this page.</p>
    </div>
  );
};

export default Contact;

App page

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

const App: React.FC = () => {
  return (
    <Router>
      <div className="grid grid-cols-4 min-h-screen">
        <nav className="bg-gray-800 col-span-1 p-4">
          <ul className="flex flex-col space-y-4">
            <li>
              <Link to="/" className="text-white font-semibold">
                Home
              </Link>
            </li>
            <li>
              <Link to="/about" className="text-white font-semibold">
                About
              </Link>
            </li>
            <li>
              <Link to="/contact" className="text-white font-semibold">
                Contact
              </Link>
            </li>
          </ul>
        </nav>
        <div className="col-span-3 bg-gray-100 p-8">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
};

export default App;