React Router v4 – How to get Params from Url example
react
38
router
3
URL
1
Male avatar

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

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:

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:

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

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 7 tháng 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 6 tháng 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 6 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/frontend/vuejs/vuerouterexamplewithnavbardynamicroutenestedroutes Vue Router example with Nav Bar, Dynamic Route & Nested Rou...
loveprogramming viết 3 tháng trước
0 0
Male avatar
0 0
https://grokonez.com/frontend/react/reactrouterexamplev4 React Router v4 example In this tutorial, we're gonna look at React example that uses Ro...
loveprogramming viết 29 ngày 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á!