React Router v4 example
react
38
router
3
Male avatar

loveprogramming viết ngày 20/05/2021

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:

react-router-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 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 of Header Component:

More at:

https://grokonez.com/frontend/react/react-router-example-v4

React Router v4 example

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
98 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết hơn 1 năm trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết hơn 1 năm trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết hơn 1 năm trước
1 0
Bài viết liên quan
White
20 3
(Link) (Link) — tracks device battery state. (Link) (Link) — tracks geo location state of user's device. (Link) (Link) — tr...
Đinh Viễn viết gần 3 năm trước
20 3
Male avatar
0 0
https://grokonez.com/frontend/react/getparamfromurledititemformreactreduxexample Get Param from Url & create Edit Item Form – reactredux example ...
loveprogramming viết 1 năm trước
0 0
Male avatar
0 0
https://loizenai.com/springbootreactdynamodbcrudexample/ SpringBoot React DynamoDB CRUD Example Tutorial: SpringBoot React DynamoDB Build CRUD Ap...
loveprogramming viết 1 năm trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
98 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!