Server side redirect with ReactJs

Question

I am trying to issue a server side redirect for certain pages for SEO reasons. The problem I am trying to solve is that some of my pages will get index by google, so if they are deleted or taken offline we want to redirect them to a different page rather than showing 404. What is the best way to achieve such redirects with React Router on the server side(express.js)?

Answer 1

You should have a component which should define routing rules, something like this:

<Router>
 <Switch>
      <Route path='/login' component= {LoginPage}/>
       ......
 </Switch>
<Router>

All I am saying is that you should define a wrapper which define the redirect url:

      var redirectToUrl = get url from your logic here;
      var urlComponent = '';
      if ( redirectToUrl )
      {
        urlComponent = <Redirect to={listing}/>;
      }

Now add this to your url handling page:

<Router>
    <div>
      {urlComponent}
     <Switch>
          <Route path='/login' component= {LoginPage}/>
           ......
     </Switch>
</div>
    <Router>

Answer 2

const redirect = (a,replace) => {
if(a.params.splat == "page1")
    replace("/page2")
}
<Route path="*" ... onEnter={redirect}/>

in server.js

match(...,(error, redirectLocation, renderProps) => { 
   ... else if (redirectLocation) { res.redirect(302,`${redirectLocation.pathname}${redirectLocation.search}`...);

Answer 3

If you are using React Router 4, tou can add Redirect component inside your Page component to redirect pages that are dead. Example: Let's say that component tried to fetch object from API but got an offline response and stored it in component state:

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';

export default class PageComponent extends Component {

    // ... other stuff

    render() {
        if (this.state.page_offline) {
            return (<Redirect to="/some-page-for-offline-data" />);
        }

        return (...); // normal page render
    }

}