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:

Then run cmd yarn install.

Configure Webpack

Open webpack.config.js:

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:

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:

– 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:

Source code

ReactRouter

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

By JavaSampleApproach | April 9, 2018.

Related Posts


Got Something To Say:

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

*