如何將道具傳遞給 Function 組件使用 react-router-dom v6

Question

我想將道具從路線傳遞到 function，我的代碼目前看起來像這樣

路線

 <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-dom v6 中，您將 props 直接傳遞給路由組件，因為它們作為ReactElement （又名 JSX ）傳遞。

例子：

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

不過，根據您的示例代碼段，聽起來您的問題更具體地說是關於將“路由道具”傳遞給組件。 在 RRDv6 中不再有任何 route 道具，即沒有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中使用 props 傳遞 function：

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

您可以在渲染 function 之外將更多道具作為名稱傳遞。

例子：

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