https://grokonez.com/frontend/react/react-router-example-v4
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:
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 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 ofHeader
Component:
More at:
https://grokonez.com/frontend/react/react-router-example-v4
React Router v4 example
Top comments (0)