date

‣

thumbnail

slug

what-is-the-difference-between-react-router-and-conventional-routing

status

Published

tags

Javascript

ReactJS

summary

Routing trong ứng dụng web được kích hoạt khi người dùng thực hiện một hành động chuyển trang nào đó. Với routing, chúng ta có thể đảm bảo các requests gửi lên đến server để handle và response cho client.

type

Post

Introduction

Routing là gì?

1. Ví dụ khi truy cập http://www.example.com thì part của URL mặc định là “/”

2. Khi user click page sản phẩm (path :”/products”), trình duyệt sẽ gửi một method http get request cho path “/products” trên server

3. Router trên server sẽ gọi các function/method để xử lý đường path “/products” tương ứng. Nếu router phát hiện, HTTP request sẽ được gọi đến function đó.

4. Xử lý xong router handler sẽ response 1 html page của trang sản phẩm (path “/products”)

5. Trình duyệt sẽ load file html của server đã response về và hiển thị content cho user

7. URL cũng sẽ tự động update thành http://www.example.com/products .

• A server-side request is an equivalent of requesting a new web page from the server. For an application using server-side routing, every time the user clicks on a link in the page or enters a new URL in the browser, the route handlers must return a new document in response to the request.

• Server-side routing causes the whole page to refresh because the server responds with a new page.

• Since server-side routing leads to a full-page refresh, unnecessary data is being requested from the server. If only the color of a button needs to be changed as a response to a request, then components such as header or footer which haven’t been changed will have to be rendered again.

• Due to page refresh, data will be loaded at varied times, which will not serve as a good UI for users.

Client-side routing

1. Change in URL is detected by Javascript code of web page, and change in URL means that the state of the application has changed.

2. A changed state implies that the view of the webpage must also be updated to stay in sync with the URL.

3. The webpage can be updated by either displaying a new component, updating an already displayed component or by maybe sending a request to the server for data from the database and then displaying that data.

4. Since only a part of the web page is updated, this means that the whole page will not be refreshed. Only a few elements inside the web page are being changed.

React Router

Declarative routing in React

History Stack

• window.history.pushState()

• window.history.popState()

• window.history.replaceState()

Why React Router?

• History object: the history object of React Router provides a way to detect URL changes. It is responsible for reporting URL change so that the appropriate route component can be loaded and displayed.

• BrowserRouter: this is a base Router that uses the HTML5 history API so that the UI which is displayed to the user is in sync with the URL. It is necessary because it adds the ability to route the components.

• Switch : <Switch> functions similar to Javascript switch statement. The pathname extracted by BrowserRouter is passed to the <Switch>. Switch renders the first Route whose path matches the URL. With the help of Switch, there is no ambiguity or confusion in which components should be displayed for which route.

• Route: this is the most important component in React router. Its function is to display a particular UI when the current URL matches its path.

• Link: <Link> is responsible for declarative routing which React router provides. When the user clicks on <Link>(<Link> displays as <a> tag in UI), the default request for server to render a new HTML page is prevented. <Link> causes only the URL to change. The history object listens for URL change and passes it to the base Router for further routing.

<a> tag in React (page refresh)

1. Cart component in Cart.jsx, this contains a link for products component.

2. Products component in Products.jsx, this contains a link for cart component.

3. Both these components are imported in App.jsx.

4. Do not forget to install “react-router-dom”. We will be using APIs of this library for routing.

//App.jsx
import React from “react”;
import { BrowserRouter, Route, Switch } from “react-router-dom”;
import { Products } from “./Products.jsx”;
import { Cart } from “./Cart.jsx”;
export const App = () => {
return (
    <div className=”App”>
    <h1>Testing routing without react router</h1>
    <BrowserRouter>
        <Switch>
            <Route path=”/products”>
                <Products />
            </Route>
            <Route path=”/cart”>
                <Cart />
            </Route>
        </Switch>
    </BrowserRouter>
    </div>
);
};

//Products.jsx
import React from “react”;export const Products = () => {
return (
    <div>
        <h1>Products</h1>
        <a href=”/cart”>Cart</a>
    </div>
);
};

//Cart.jsx
import React from “react”;export const Cart = () => {
return (
    <div>
        <h1>Cart</h1>
        <a href=”/products”>Products</a>
    </div>
);
};

• Page refreshes.

• A new request is sent every time to the server running on your terminal and the entire HTML page is loaded. You can observe this in the Network section towards the right in the below output

1. The URL updates to http://www.example.com/products. This change in URL is detected by the history object of React router.

2. The history object informs BrowserRouter of the change in URL. BrowserRouter extracts the pathname “/products” and passes it to Switch of React router.

3. The pathname “/products” is tested against the “path” prop of different “Routes” defined in Switch.

4. <Switch> returns the “Route” which has path as “/products” and the component associated with this Route is loaded on the index.html file.

5. Therefore, without the browser sending any request to the server, the products page was displayed without a refresh.

Conclusion