React Router v4 – How to get Params from Url example

https://grokonez.com/frontend/react/react-router-v4-how-to-get-params-from-url-react-router-example

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:

How to

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

More at:

https://grokonez.com/frontend/react/react-router-v4-how-to-get-params-from-url-react-router-example

React Router v4 – How to get Params from Url example