React router V6 - 如何根据参数在路由元素上设置 React 键

Question

在react-router V6中，你还可以使用参数作为React key吗？ 在react-router V5中，这可以通过编写来实现：

<Switch>
  <Route path="products/:productId" render={({match}) => <ProductDetail key={match.params.productId}/>} />
</Switch>

现在，切换到react-router V6后，如何传递密钥？

<Routes>
  <Route path="products/:productId" element={<ProductDetail key={?}/>}/>
</Routes>

或者这不再可能，您是否应该添加一个包装容器，该容器从

useParams()

接收 ProductId 参数并将其传递？

MyWrapper = () => {
  const { productId} = useParams();
  return <ProductDetail key={productId}/>;
}

Answer 1

const ProductDetailWrapper = () => {
 const { productId } = useParams();
 return <ProductDetail key={productId} />;
};

const App = () => {
 return (
   <Routes>
     <Route path="products/:productId" element={<ProductDetailWrapper />} />
   </Routes>
 );
};