如何将道具传递给功能组件使用react路由器dom v6

Question

我想将props从路由传递到函数中，我的代码目前看起来像这个

路线

<Route path="/person" render={(params) => <ProductDetails {...params} />} /> 

代码

function ProductDetails(props) {  
return (  
<div className="section has-text-centered mt-4">  
console.log(props)  
<h1>Hello</h1>  
</div>  
);  
};  
export default ProductDetails;

我在这里缺了什么，请帮忙。

Answer 1

在react-router-domv6中，您可以将props直接传递给路由组件，因为它们是作为ReactElement(，也称为JSX(传递的。

示例：

<Route path="person" element={<ProductDetails /* pass props here */ />} />

不过，根据你的示例片段，这听起来像是你的问题——更具体地说，是关于传递"；路线道具"；到组件。在RRDv6中，不再有任何路由道具，即没有history、location和match道具。使用React挂钩访问这些：useNavigate用于导航，useLocation用于location，useMatch用于match和useParams，专门用于路线参数。

import { useNavigate, useLocation, useParams } from 'react-router-dom';
function ProductDetails(props) {
const navigate = useNavigate();
const location = useLocation();
const match = useMatch();
useEffect(() => {
console.log(props);
}, [props]);
return (  
<div className="section has-text-centered mt-4"> 
<h1>Hello</h1>  
</div>  
);  
};  
export default ProductDetails;

Answer 2

您可以通过以下方式在React Router DOM V6.中传递带道具的函数：

<Route path="/person" element={<ProductDetails render={(params) => ({ ...params })} />} />

您还可以将更多的道具作为名称传递到渲染函数之外。

示例：

<Route path="/person" element={<ProductDetails render={(params) => ({ ...params })} user={user} />} />