• 🚀 React Introduction
  • 🔏 React Structure
  • 🔏 React Components
  • 🔏 React props
  • 🔏 React Styling & UI
  • 🚀 React Router
  • 🔏 React Events
  • 🚀 React useState
  • 🔏 React useEffect
  • 🔏 React API Integration
  • 🔏 React useContext
  • 🔏 React useRef
  • 🔏 React Storage
  • 🔏 React useMemo
  • 🔏 React useReducer
  • 🔓 React Redux
  • 🔏 React Authentication
  • 🔏 React Testing
  • 🔏 React Build & Deploy

React With Routing

React Router is a popular library for handling navigation in React applications. It enables the creation of single-page applications with navigation that feels like a traditional multi-page website. React Router provides a set of navigational components and a declarative approach to define the routes of your application.

How To Setup React Router Package

npm i react-router-dom@7

Setup BrowserRouter

  1. < StrictMode >
  2. < BrowserRouter >
  3. < App />
  4. < /BrowserRouter >
  5. < /StrictMode >

Tools to Set Up a React App

  1. < Routes >
  2. < Route path="/" element={< Home />} />
  3. < Route path="/page" element={< Page />} />
  4. < Route path="/profile" element={< Profile />} />
  5. < Route path="*" element={< h1 >Page 404< /h1 >} />
  6. < Routes >

When to Use React.js

  • You want maximum flexibility and control over your project.
  • You are building a highly interactive single-page application (SPA).
  • You are comfortable setting up your own routing, state management, and other tools.