Install 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-a…


This content originally appeared on DEV Community and was authored by RSM Academy BD

Image description

Promo:

IPromo Video

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>


This content originally appeared on DEV Community and was authored by RSM Academy BD


Print Share Comment Cite Upload Translate Updates
APA

RSM Academy BD | Sciencx (2024-09-17T06:05:54+00:00) Install React Router Dom With Tailwind CSS. Retrieved from https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/

MLA
" » Install React Router Dom With Tailwind CSS." RSM Academy BD | Sciencx - Tuesday September 17, 2024, https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/
HARVARD
RSM Academy BD | Sciencx Tuesday September 17, 2024 » Install React Router Dom With Tailwind CSS., viewed ,<https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/>
VANCOUVER
RSM Academy BD | Sciencx - » Install React Router Dom With Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/
CHICAGO
" » Install React Router Dom With Tailwind CSS." RSM Academy BD | Sciencx - Accessed . https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/
IEEE
" » Install React Router Dom With Tailwind CSS." RSM Academy BD | Sciencx [Online]. Available: https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/. [Accessed: ]
rf:citation
» Install React Router Dom With Tailwind CSS | RSM Academy BD | Sciencx | https://www.scien.cx/2024/09/17/install-react-router-dom-with-tailwind-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.