React Router Basics

React Router is a standard library for routing in React applications. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps UI in sync with the URL.

To install React Router, you need to run the following command:

npm install react-router-dom

3.1. Setting Up Routes

To set up basic routing, you will need the following components:

• BrowserRouter
• Route
• Link

Here's an example of how to set up basic routes:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => 
Home
;
const About = () => 
About
;

function App() {
    return (
        
            
            
            
        
    );
}

export default App;
                

Dynamic routing is used when you want to render a component based on the parameters in the URL. For example:

const User = ({ match }) => 
User ID: {match.params.id}
;


                

Nested routes allow you to define routes within other routes. This is useful for creating layouts or specific views under a parent route. For example:

const Dashboard = () => (
    

        
Dashboard
        
        
    
);