RSM Academy BD

Posted on Sep 17

Install React Router Dom With Tailwind CSS

#webdev #reactjsdevelopment #tailwindcss #rsmacademybd

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;

Make other page/components

Nested Routher

Home Page



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>

DEV Community