Home > other >  How to make /92329 redirect to /products/92329 in React
How to make /92329 redirect to /products/92329 in React

Time:09-10

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}
    />    

enter image description here

you can use the link for other matches Edit how-to-make-92329-redirect-to-products-92329-in-react (RRDv5)

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>

Edit how-to-make-92329-redirect-to-products-92329-in-react (RRDv6)

  • Related