title: Redirect with 301 status code in react js single page application
body: <p>I've developed a web application in react js and I'm using the client-side routing. I have a few deleted product URLs and I want to redirect users to the product listings URL with <strong>HTTP Status code 301</strong> when the user opens any of the deleted product URLs.
  For Example, I've one product URL <strong><a href="http://www.abc.com/prod-detail/123" rel="nofollow noreferrer">www.abc.com/prod-detail/123</a></strong> and this product is deleted so when the user opens this URL, I want him to redirect to <a href="http://www.abc.com/products" rel="nofollow noreferrer">www.abc.com/products</a> with HTTPS status code 301.</p>
  <p>I tried to achieve this using the below solution.</p>
  <p>Code to redirect the user to the products listings from the product details.</p>
  <p>productDetails.js</p>
  <pre><code>if(productNotFound){
  window.location.href =&quot;/products?redirect=301&quot;;
  }
  </code></pre>
  <p>I created one proxy server using <strong>http-proxy-middleware</strong> in the application to filter the above requests (If products contain the <strong>redirect=301</strong> param) and pass them to the Node server.</p>
  <p>setupProxy.js</p>
  <pre><code>const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function (app) {    
      const filter = function (pathname, req) { 
          if(req.query &amp;&amp; req.query.redirect==='301'){
              return true;
          }
          else {
              return false;
          }
      };
     
      const apiProxy = createProxyMiddleware(myfilter, {
          target: &quot;http://localhost:8000/&quot;,//Node server
          changeOrigin: false,
          secure: false    
      });    
      app.use('/products',apiProxy);
  };
  </code></pre>
  <p>In the Node JS server, I'm filtering the requests having query param as <strong>redirect=301</strong> and If I found this type of request I just redirect with the status code 301.</p>
  <p>inedx.js (Node)</p>
  <pre><code>router.get('/products', function (req, res, next) {
      if(req.query &amp;&amp; req.query.redirect==='301'){    
      req.query = null;
      const hostUrl = 'http://' + req.get('host') + req.originalUrl.split('?')[0];
      //res.statusCode=301;
      res.redirect(301, hostUrl);
      }
      else{
          res.redirect(301, 'http://' + req.get('host') + req.originalUrl);
      }
  });
  </code></pre>
  <p>The above solution is not working for me. I'm not receiving the request on the Proxy server. I'm not sure this is the correct way or not as I'm new to react js.</p>
  <p>Thanks in advance for any assistance or insight.</p>
  <p>Please also let me know if there is any other way to achieve this without using server-side routing.</p>
  <p>I hope the question makes sense. Any help would be appreciated.</p>