使用参数进行导航在反应中不起作用

Question

所以我想做的是，我有一个在我的 app.js 中定义的 /product 路线，它有一个 id 参数

应用程序.js

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

产品.js

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

我试图使用“useNavigate()”导航到页面/产品并传递一个我拥有的ID，这样我就可以通过这样做来使用它，但是它不起作用并显示为未定义。有谁知道如何解决这个问题吗？

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

Answer 1

您可以使用

useLocation

来获取状态：

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

Answer 2

您的代码是正确的，您的道具的路径应该是

props.location.state.id

页面中的

<Product />

。