DEV Community

RSM Academy BD
RSM Academy BD

Posted on

Install React Router Dom With Tailwind CSS

#webdev #reactjsdevelopment #tailwindcss #rsmacademybd

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: [], };
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

5. Start your build process

  • Run your build process with npm run start.
 npm run start
Enter fullscreen mode Exit fullscreen mode

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>; }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

We wrap our content first with . 

 import { BrowserRouter } from "react-router-dom"; <BrowserRouter> <App /> </BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)