In react-router V6, can you still use a parameter as React key?
In react-router V5, this could be achieved by writing:
<code><Switch>
<Route path="products/:productId" render={({match}) => <ProductDetail key={match.params.productId}/>} />
</Switch>
</code>
<code><Switch>
<Route path="products/:productId" render={({match}) => <ProductDetail key={match.params.productId}/>} />
</Switch>
</code>
<Switch>
<Route path="products/:productId" render={({match}) => <ProductDetail key={match.params.productId}/>} />
</Switch>
Now, after the switch to react-router V6, how do you pass the key?
<code><Routes>
<Route path="products/:productId" element={<ProductDetail key={?}/>}/>
</Routes>
</code>
<code><Routes>
<Route path="products/:productId" element={<ProductDetail key={?}/>}/>
</Routes>
</code>
<Routes>
<Route path="products/:productId" element={<ProductDetail key={?}/>}/>
</Routes>
Or is that no longer possible and should you add a wrapper container, which receives the productId param from useParams()
and passes it on?
<code>MyWrapper = () => {
const { productId} = useParams();
return <ProductDetail key={productId}/>;
}
```
</code>
<code>MyWrapper = () => {
const { productId} = useParams();
return <ProductDetail key={productId}/>;
}
```
</code>
MyWrapper = () => {
const { productId} = useParams();
return <ProductDetail key={productId}/>;
}
```