React Router v4 – How to get Params from Url example

In this tutorial, we’re gonna look at React example that uses Router v4 for getting Params from Url.

Goal

We will use React Router v4 to show a list of Book, each Book has its own link. Clicking on any Book item will show corresponding Component depending on the id in the Url:

react-router-get-params-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 3 Components: Dashboard, AddBook, 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.

We also create EditBook Component for responding /book/:id request. It receives id as params:

This is code for DashBoard Component which has list of Books, we use Link for each item:

Create Router

Inside routers/AppRouter.js:

– Because we will handle dynamic requests /book/:id, 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-getParams

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

By JavaSampleApproach | April 10, 2018.

Related Posts


Got Something To Say:

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

*