What is React-Router ?

SPA: single-page-application , Now a days Modern website are actually made up of a single page, they just look like multiple pages because they contain components which render like separate pages

Step 1: npm install react-router-dom

Step 2:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

Step 3:

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Step 4:

function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

Step 5:

<Route path='/' component={Home} />

Step 6:

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

Step 7:

import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop'

Step 8:

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};

Conclusion:

Use the react-router-dom library for routing in react appliction.

Enjoy Coding....................