How to handle 404 page and redirection in React using React Router

Today its a funny and simple topic about react. How we can handle NotFoundPages and redirection in React using React Router component.

Environment setup:

First, we should setup the environment. We will use React with ECMAScript 5 and will use:
– npm as our package manager
– Gulp as a task runner
– Browserify which will allow us to write a client side code using [require] in the same way we use it in nodeJs
– reactify or babelify to compile JSX to Javascript ES5
– Eslint to get a notification for any JavaScript typing issues

So please use this starter kit to quickly start React project using the above technologies:

https://github.com/deserthero/react-flux-starter-kit

Project structure and components:

There is an index.html which represent our single page application and main.js for bootstraping the React, routes.js which handles routes, and components:

  • app.js (The main top level (ViewController) component)
  • homePage.js
  • aboutUs.js
  • news.js

index.hyml:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Our App</title>
<link rel="stylesheet" href="css/bundle.css" />
</head>
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
</body>
</html>

main.js:

"use strict";
var React = require('react');
var Router = require('react-router');
var routes = require('./routes');
Router.run(routes, function(Handler) {
React.render(<Handler/>, document.getElementById('app'));
});

app.js (The ViewController component):

/*eslint-disable strict */ //Disabling check because we can't run strict mode. Need global vars.
var React = require('react');
var Header = require('./common/header');
var RouteHandler = require('react-router').RouteHandler;
$ = jQuery = require('jquery');
var App = React.createClass({
render: function() {
return (
<div>
<Header/>
<div className="container-fluid">
<RouteHandler/>
</div>
</div>
);
}
});
module.exports = App;

we also created routes.js which will handle all the routes:

routes.js:

"use strict";
var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;

var routes = (
<Route name="app" path="/" handler={require('./components/app')}>
<DefaultRoute handler={require('./components/homePage')} />
<Route name="about" handler={require('./components/about/aboutPage')} />
<Route name="news" handler={require('./components/news/news')} />
</Route>
);
module.exports = routes;

How to create a 404 component and redirect any invalid urls to it:

First we will create a component which we will redirect any user to it in case of 404.

in components folder, create notFoundPage.js:

"use strict";
var React = require('react');
var Link = require('react-router').Link;
var NotFoundPage = React.createClass({
render: function() {
return (
<div>
<h1>Page Not Found</h1>
<p>Sorry, there is nothing to see here.</p>
<p><Link to="app">Back to Home</Link></p>
</div>
);
}
});
module.exports = NotFoundPage;

And in routes.js we will add this 2 lines:
var NotFoundRoute = Router.NotFoundRoute;

and

<NotFoundRoute handler={require('./components/notFoundPage')} />

so the routes component will be:

"use strict";
var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var routes = (
<Route name="app" path="/" handler={require('./components/app')}>
<DefaultRoute handler={require('./components/homePage')} />
<Route name="about" handler={require('./components/about/aboutPage')} />
<Route name="news" handler={require('./components/news/news')} />
<NotFoundRoute handler={require('./components/notFoundPage')} />
</Route>
);
module.exports = routes;

Redirect any specific URL or wild card urls to another URL:

Also if you want to redirect any invalid url to another valid one you should:

1- take a refrance to Route.Redirect
var Redirect = Router.Redirect;

2- add rules:

<Redirect from="about-us" to="about" /> // Here we redirected any one go to this invalid path (about-us) to the about component
<Redirect from="about/*" to="about" /> // Here we redirected every url after about/ to the about component (wold card)

Note that we use the path with from and the name with to in Redirect tag which mke sence:

<Redirect from="url-path" to="route-name" />

so routes.js will be:

"use strict";
var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var Redirect = Router.Redirect;
var routes = (
<Route name="app" path="/" handler={require('./components/app')}>
<DefaultRoute handler={require('./components/homePage')} />
<Route name="about" handler={require('./components/about/aboutPage')} />
<Route name="news" handler={require('./components/news/news')} />
<NotFoundRoute handler={require('./components/notFoundPage')} />
<Redirect from="about-us" to="about" />
<Redirect from="about/*" to="about" />
</Route>
);
module.exports = routes;

That’s all, Thanks

Show your support

Clapping shows how much you appreciated Ahmed Marzouk’s story.