React Router Dom With Tailwind CSS

Promo:

Install Tailwind CSS with Create React App

1. Create your project

• Start by creating a new React project with Create React App v5.0+ if you don't have one already set up.

Open Terminal

npx create-react-app my-project
cd my-project

2. Install Tailwind CSS

• Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

3. Configure your template paths

• Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. Add the Tailwind directives to your CSS

• Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start your build process

• Run your build process with npm run start.

npm run start

6. Start using Tailwind in your project

• Start using Tailwind’s utility classes to style your content.

export default function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

7. Add React Router

• To add React Router in your application, run this in the terminal from the root directory of the application:

npm i -D react-router-dom@latest

8. Folder Structure

-To create an application with multiple page routes, let's first start with the file structure.

-Within the src folder, we'll create a folder named pages with several files:

src\pages:

• NavBAr.jsx
• Home.jsx
• Blogs.jsx
• Contact.jsx
• NoPage.jsx etc [Your components/page name] Each file will contain a very basic React component.

9. Basic Usage

• Now we will use our BrowserRouter in our index.js file.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

We wrap our content first with .

import { BrowserRouter } from "react-router-dom";
<BrowserRouter>
<App />
</BrowserRouter>

10. Now we will use our Router in our app.js file.

import { Route, Routes } from "react-router-dom";
import GovtJob from "./pages/GovtJob";

import PrivetJob from "./pages/PrivetJob";

import TeacherJob from "./pages/TeacherJob";
import ItJob from "./pages/ItJob";
import Home from "./components/Home";
import NavBar from "./components/NavBar";
import Contact from "./components/Contact";
import Blogs from "./components/Blogs";
import About from "./components/About";

function App() {
  return (
    <div className="max-w-screen-lg mx-auto">
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/govtJob" element={<GovtJob />} />
        <Route path="/privetJob" element={<PrivetJob />} />
        <Route path="/teacherJob" element={<TeacherJob />} />
        <Route path="/itJob" element={<ItJob />} />
        {/* ============================================= */}
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="blogs" element={<Blogs />} />
      </Routes>
    </div>
  );
}

export default App;

Example Explained

• We define our . An application can have multiple . Our basic example only uses one.

• s can be nested. The first has a path of / and renders the Layout component.

• The nested s inherit and add to the parent route. So the blogs path is combined with the parent and becomes /blogs.

• The Home component route does not have a path but has an index attribute. That specifies this route as the default route for the parent route, which is /.

• Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.

Pages / Components

• The NavBar component has and elements.

• The renders the current route selected.

• is used to set the URL and keep track of browsing history.

• Anytime we link to an internal path, we will use instead of .

• The "NavBar route" is a shared component that inserts common content on all pages, such as a navigation menu.

import React from "react";
import { Outlet, Link } from "react-router-dom";
const NavBar = () => {
  return (
    <div>
      <ul className="flex justify-center items-center gap-10 text-2xl pb-10">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>

        <li>
          <Link to="/contact">Contact</Link>
        </li>
        <li>
          <Link to="/blogs">Blogs</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
};

export default NavBar;

import React from "react";
import { Link } from "react-router-dom";
const Home = () => {
  return (
    <div>
      <h1 className="text-red-500 underline text-3xl text-center">
        Home Page{" "}
      </h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam et
        voluptate rerum eaque adipisci soluta placeat ad temporibus, laborum
        recusandae quas! Possimus eaque mollitia enim iste neque placeat omnis
        veritatis.
      </p>

      <ul className="flex justify-center items-center gap-10 text-2xl pb-10 text-green-500">
        <li>
          <Link to="/govtJob">Govt Job</Link>
        </li>
        <li>
          <Link to="/privetJob">Privet Job</Link>
        </li>
        <li>
          <Link to="/teacherjob">Teacher Job</Link>
        </li>
        <li>
          <Link to="/itJob">IT Job</Link>
        </li>
      </ul>
    </div>
  );
};

export default Home;