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

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>
  );
}

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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.