DEV Community


React Router v4 example

Software Engineer - Founder at
・2 min read

React Router v4 example

In this tutorial, we're gonna look at React example that uses Router v4 for implementing navigation.


We will use React Router v4 to create a navigation bar in which, clicking on any item will show corresponding Component without reloading the site:


How to

Project Structure


Install Packages

We need react-router-dom to apply Router. Add it to dependencies in package.json:

  "dependencies": {

Then run cmd yarn install.

Configure Webpack

Open webpack.config.js:

const path = require('path');

module.exports = {
    module: {
        rules: [...]
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true

historyApiFallback option is specifically for webpack-dev-server. Setting it true will effectively ask the server to fallback to index.html when a requested resource cannot be found (404 occurs).

Create Components

  • For each Page that displays when clicking on Navigation item, we add one Component. So we have 4 Components: Dashboard, AddBook, EditBook, Help.
  • We need a Component for 404 status, it's called NotFound.
  • Now, we put a group of NavLink in header of Header Component:

More at:

React Router v4 example

Discussion (0)