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 ofHeader
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
Top comments (0)