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:


{
  ...
  "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 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:

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

const Header = () => (
    <header>
        <h2>Java Sample Approach</h2>
        <h4>Book Mangement Application</h4>
        <div className='header__nav'>
            <NavLink to='/' activeClassName='activeNav' exact={true}>Dashboard</NavLink>
            <NavLink to='/add' activeClassName='activeNav'>Add Book</NavLink>
            <NavLink to='/help' activeClassName='activeNav'>Help</NavLink>
        </div>
    </header>
);

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.

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

import React from 'react';

const EditBook = (props) => (
    <div className='container__box'>
        Edit the Book with id = {props.match.params.id}
    </div>
);

export default EditBook;

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

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

const DashBoard = () => (
    <div className='container__list'>
        Book List:
        <ul>
            <li><Link to='/book/1'>Book 1</Link></li>
            <li><Link to='/book/2'>Book 2</Link></li>
            <li><Link to='/book/3'>Book 3</Link></li>
        </ul>
    </div>
);

export default DashBoard;

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 = () => (
    <BrowserRouter>
        <div className='container'>
            <Header />
            <Switch>
                <Route path="/" component={DashBoard} exact={true} />
                <Route path="/add" component={AddBook} />
                <Route path="/book/:id" component={EditBook} />
                <Route path="/help" component={Help} />
                <Route component={NotFound} />
            </Switch>
        </div>
    </BrowserRouter>
);

export default AppRouter;

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


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-getParams

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



By grokonez | April 10, 2018.

Last updated on May 3, 2021.



Related Posts


Got Something To Say:

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

*