Navigation using parameter not working in react-CodePudding

So what im trying to do, is that i have a route which is /product defined in my app.js and it has a parameter of id

App.js

 <Route path='/product' element={<Product  />} />

Product.js

export const Product = ({ ID }) => {

what im trying to navigate to the page /product using 'useNavigate()' and pass an id i have so i can use it there by doing so, however it's not working and showing as undefined.Does anyone have any clue about how to fix this?

const handleOpen = (id) => {
   navigate('/product',{ state: { id: id } }); };

CodePudding user response：

You can use useLocation to get state.

export const Product = () => {
   const location = useLocation()
   const id = location.state.id
}

CodePudding user response：

You code is correct, the path to your prop should be props.location.state.id in the <Product /> page.