React JS routing nothing is displaying

Im new at routing on react.JS, however I have been struggling because the simple products.jsx
should return a simple message when I click, but no one is displaying.

Index.JS code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
    <App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();

code at App.JS

import React, { Component } from "react";
import NavBar from "./components/navbar";
import { Route, Routes } from 'react-router-dom';
import Products from "./components/products";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <Routes>
          <Route path= "/products" component={Products}></Route>
        </Routes>
      </div>
    );
  }
}

export default App;

nav.jsx

import React from "react";

const NavBar = () => {
  return (
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/products">Products</a>
      </li>
      <li>
        <a href="/posts/2018/06">Posts</a>
      </li>
      <li>
        <a href="/admin">Admin</a>
      </li>
    </ul>
  );
};

export default NavBar;

products.jsx code

const Product = () => {
  return <h1>Products</h1>;
};

export default Product;

I dont know basically what i’m missing.

>Solution :

In react-router-dom v6 the Route components render their components on the element prop as JSX.

<Route path="/products" element={<Products />} />

If you are still using v5 and have just mixed up documentation, then in v5 use the Switch instead (Routes replaced Switch in v6) and use the component prop as you were.

<Switch>
  <Route path="/products" component={Products} />
</Switch>