Upon clicking on links the view is unable to load?

Question

I am trying to learn web development using react but am stuck in this situation where I am unable to find why the view is not being loaded. Please, someone, guide me.

App.js

import React, {Component} from 'react';

import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';

import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Seller';

import classes from './App.css';

class App extends Component{
  render(){
    return(
      <BrowserRouter>
        <div className={classes.App}>
          <p>Shop</p>
      
               <Link to='/buyer'>I want to Buy</Link>
               <Link to='/seller'>I want to Sell</Link>
             
          
           <Routes>
             <Route path="/buyer" exact render={Buyer} />
             <Route path="/seller" exact component={Seller} />
           </Routes>

        </div>
      
      </BrowserRouter>
       
    )
  }
}

export default App;

Buyer.js

import React, {Component} from 'react';

import classes from './Buyer.css';

class Buyer extends Component{
    render(){

        return(
            <div className={classes.Buyer}>
                <p>I want to buy groceries</p>
            </div>
        );
    }
}

export default Buyer;

Seller.js

import React, {Component} from 'react';

class Seller extends Component{
    render(){
        return(
            <div>
                <p>I want to sell groceries</p>
            </div>
        );
    }
}

export default Seller;

After clicking the link "I want to buy" the view showing "I want to buy groceries" should have appeared but nothing is appearing.

Answer 1

In react-router-dom v6 the Route components no longer take exact, render, and component props, they now only take path and element. The element prop is passed a JSX literal.

Example:

<Route path="/buyer" element={<Buyer />} />

App

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <p>Shop</p>

          <Link to="/buyer">I want to Buy</Link>
          <Link to="/seller">I want to Sell</Link>

          <Routes>
            <Route path="/buyer" element={<Buyer />} />
            <Route path="/seller" element={<Seller />} />
          </Routes>
        </div>
      </BrowserRouter>
    );
  }
}