React JS routing nothing is displaying-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

If you are using react-router-dom 6, you have to use element instead of component inside of each route like this:

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

if you are using react-router-dom 5, you have to use Switch instead of Routes, like this:

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