React Router v4 example

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

Goal

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:

react-router-example-goal

How to

Project Structure

react-router-example-structure

Install Packages

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

{
  ...
  "dependencies": {
    ...
    "react-router-dom":"4.2.2",
  }
}

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:

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => (
    
...
Dashboard Add Book Edit Book Help
); export default Header;

NavLink provides accessible navigation around our application, we use 2 attributes:
to: location to link to.
activeClassName: class to give the element when it is active.
exact: when true, the activeClass will only be applied if the location is matched.

Create Router

Inside routers/AppRouter.js:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from '../components/Header';
import DashBoard from '../components/DashBoard';
import AddBook from '../components/AddBook';
import EditBook from '../components/EditBook';
import Help from '../components/Help';
import NotFound from '../components/NotFound';

const AppRouter = () => (
    
        
); export default AppRouter;

– Assume that we have a server that will handle dynamic requests, so we use BrowserRouter. If you have a server that only serves static files, just use HashRouter.

– We use Switch to group Route. It will iterate over children and only render the first child that matches current path.

– When Switch comes to the last Route which doesn’t specifies path, it will definitely render the component => we use this case for 404 page.

Render App Router

Inside app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import './styles/styles.scss';

ReactDOM.render(, document.getElementById('app'));

Source code

ReactRouter

For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.



By grokonez | April 9, 2018.


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*