the users will came to the page from a QR link (that I can't change), the link is configured to be mypage.com/[EAN] i.e. mypage.com/4345674299043 ean is always a number with 13 digits on it. So when users enter the site with this kind of link, I should redirect them to mypage.com/products/[EAN] in the example case it'll be mypage.com/products/4345674299043
I tried to use routing inside app.js but it didn't work. I'm getting 404
CodePudding user response:
<Redirect
key= { route.path }
from = { route.path } //from path
to = { route.redirect } // redirect path
strict = { true}
exact = { true}
/>
you can use the link for other matches
react-router-dom@6
import {
Routes,
Route,
Navigate,
useParams,
generatePath
} from "react-router-dom";
...
const ProductRedirect = () => {
const { EAN } = useParams();
return <Navigate replace to={generatePath("/products/:EAN", { EAN })} />;
};
...
<Routes>
<Route path="/products/:EAN" element={<Product />} />
<Route path="/:EAN" element={<ProductRedirect />} />
</Routes>