Why am I getting an error in my Route Redux code?

Question

I can't find my error in the code. Could someone explain to me.

Test: Nav:' should be rendered on the path "/". The "Home" component should be rendered only on the path "/" The "Home" component should not be displayed in any other route The route "/product/:id" should show only the component ProductDetail' The route "/products/create should show only the CreateProduct component" thanks for your help

my code:

import { Route, useParams } from 'react-router-dom';
import CreateProduct from './components/CreateProduct/CreateProduct.jsx';
import ProductDetail from './components/ProductDetail/ProductDetail.jsx';
import Home from './components/Home/Home.jsx';
import Nav from './components/Nav/Nav.jsx';function App() {
  return ( 
   <div className="App">
            <Nav />
                <Route exact path='/' render={Home} />
                <Route exact path='/product/:Id' render={ProductDetail} />
                <Route exact path='/products/create' render={CreateProduct} />
      </div>
  );
}

Answer 1

First Thing You need to wrap your routes with browser router and if you are using V6 there is no need to use

"exact"

see this one for V6 https://reactrouter.com/docs/en/v6/getting-started/tutorial

and for V5 https://v5.reactrouter.com/web/guides/quick-start

Answer 2

I think you are supposed to wrap your routes with <Routes>

Answer 3

Wrap your route tags in routes and BrowseRouter, also use element instead of render depending upon the version of react-router you are using.

And also try using nav component inside your other components like Home and ProductDetail, so that this components only contains routing, makes things a little simpler.