What is React Router?

React Router is a standard library for routing in React. It enables navigation between different views of components in a React application, allows changing the browser URL, and keeps the UI in sync with the URL.

React Router works on the web, server-side (Node.js), and even React Native. It provides unique URLs for components and makes UI easily shareable.

Follow these steps to create a React app and setup routing:

1. npm create vite@latest hello-router-dom
2. cd hello-router-dom
3. npm install
4. npm i react-router-dom
5. npm run dev

We need three main components from react-router-dom:

• BrowserRouter – Wraps the App for routing
• Routes – A container for all routes
• Route – Defines the path and its component

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'

const App = () => {
  return (
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
      <Route path='/contact' element={<Contact/>}/>
    </Routes>
  )
}
export default App