React router dom V6

2025-01-11 < /canvas>< /span>< /p> React router dom V6 xuất hiện sử dụng các tính năng tốt nhất từ các phiên bản trước đã kết thúc một thập kỉ định tuyến phía c
React router dom V6 xuất hiện sử dụng các tính năng tốt nhất từ các phiên bản trước đã kết thúc một thập kỉ định tuyến phía client,nó tương thích với react từ 16.8 trở lên. Bài viết này mình sẽ tổng hợp những kiến thức cơ bản đến nâng cao về react-router-dom< /code>,các ví dụ được viết vàchỉnh sửa trên codesandbox để dễ theo dõi ,yêu cầu cần có kiến thức cơ bản vềhtml< /code> css< /code> javascript< /code> reactj< /code> vàmột chút thời gian.< /p>

1. Cài đặt< /h2>
# Tạo ứng dụng reactj

npx create-react-app react-router-tutorial
# Cài thư viện

cd react-router-tutorial

npm install react-router-dom@6

< /code>< /pre>
Thêm bootstrap V5 vào file public / index.html< /code> để xây dựng giao diện cho nhanh< /p>

<< /span>link< /span>

  rel< /span>=< /span>"< /span>stylesheet"< /span>< /span>

  href< /span>=< /span>"< /span>https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"< /span>< /span>

/>< /span>< /span>

< /code>< /pre>
2. Giao diện  vàcấu trúc component< /h2>


cấu trúc phân chia component< /li>

< /ul>
- App

  |-- sidebar

  |-- Dashboard

< /code>< /pre>
import< /span> sidebar from< /span> './components/sidebar'< /span>

import< /span>  Dashboardfrom< /span> ' ./components /  Dashboard'< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  return< /span> (< /span>

    << /span>< /span>>< /span>< /span>

      < /span><< /span>sidebar< /span>< /span> />< /span>< /span>

      < /span><< /span>Dashboard< /span>< /span> />< /span>< /span>

    < /span></< /span>< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
3 . configure route< /h2>
Đầu tiên muốn kết nối ứng dụng của bạn với URL của trình duyệt thì phải import  Browserroutervà bọc nó bên ngoài  toàn bộ ứng dụng chính là componentApp< /code>< /p>

import< /span>  ReactDOMfrom< /span> 'react-dom'< /span>

import< /span> App from< /span> './App'< /span>

import< /span> {< /span>  Browserrouter}< /span> from< /span> ' react - router - dom '< /span>
const< /span>  rootelement=< /span> document.< /span>getElementById< /span>(< /span>'root'< /span>)< /span>

ReactDOM.< /span>render< /span>(< /span>

  << /span>Browserrouter< /span>< /span>>< /span>< /span>

    < /span><< /span>App< /span>< /span> />< /span>< /span>

  < /span></< /span>Browserrouter< /span>< /span>>< /span>< /span>,< /span>

   rootelement

)< /span>

< /code>< /pre>
tạicomponent sidebar< /code> ở giao diện ban đầu chúng ta mới chỉ sử dụng thẻ a< /code>,giờ để điều hướng ta sử dụng link< /p>

import< /span> {< /span>  link}< /span> from< /span> ' react - router - dom '< /span>
export< /span> const< /span> sidebar< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  return< /span> (< /span>

    << /span>ul< /span>>< /span>< /span>

      < /span><< /span>li< /span>>< /span>< /span>

        < /span>{< /span>}< /span>

        < /span><< /span>link< /span>< /span> to< /span>=< /span>'< /span>/'< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span>>< /span>< /span>Dashboard< /span></< /span>link< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

      < /span><< /span>li< /span>>< /span>< /span>

        < /span>{< /span>}< /span>

        < /span><< /span>link< /span>< /span> to< /span>=< /span>'< /span>/orders'< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span>>< /span>< /span>order< /span></< /span>link< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

      < /span><< /span>li< /span>>< /span>< /span>

        < /span>{< /span>}< /span>

        < /span><< /span>link< /span>< /span> to< /span>=< /span>'< /span>/products'< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span>>< /span>< /span>product< /span></< /span>link< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

      < /span><< /span>li< /span>>< /span>< /span>

        < /span>{< /span>}< /span>

        < /span><< /span>link< /span>< /span> to< /span>=< /span>'< /span>/customers'< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span>>< /span>< /span>customer< /span></< /span>link< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

    < /span></< /span>ul< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Như vậy tại sidebar< /code>  chúng ta đã điều hướng is sang sing các URL khác nhau ,giờ với các URL đó sẽ load các component tương ứng sử dụng route  vàroute ,tại componentApp< /code> sửa lại< /p>

import< /span> {< /span> route,< /span> route }< /span> from< /span> ' react - router - dom '< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  return< /span> (< /span>

    << /span>route< /span>< /span>>< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/orders'< /span>< /span> element< /span>=< /span>{< /span><< /span>order< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/products'< /span>< /span> element< /span>=< /span>{< /span><< /span>product< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/customers'< /span>< /span> element< /span>=< /span>{< /span><< /span>customer< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span></< /span>route< /span>< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/configuring-route-c87nm?file=%2Fsrc%2FApp.jsx< /p>
4. Active link< /h2>
Ở phần trước tại component sidebar< /code> khi chúng ta sử dụng  <link>< /code>  thì is này output thực tế ra HTML như này< /p>

<< /span>link< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span> to< /span>=< /span>'< /span>/orders'< /span>< /span>>< /span>< /span>order< /span></< /span>link< /span>< /span>>< /span>< /span>
<< /span>a< /span> class< /span>=< /span>"< /span>nav - link"< /span>< /span> href< /span>=< /span>"< /span>/orders"< /span>< /span>>< /span>< /span>order< /span></< /span>a< /span>>< /span>< /span>

< /code>< /pre>
Vẫn khá là ok nhưng giờ chúng ta muốn có thêm classactive< /code> hoặc style gì đó đặc biệt cho link đang xem thì sẽ không dùng cách này được.< /p>

4-1. Active link với tên class là active< /h3>
Nếu class tên là  active< /code> thì easy rồi chúng ta chỉ việc thay link< /code> thành Navlink< /code>,các bạn sẽ thấy việc output ra html cũng đã khác nhau rồi.< /p>

<< /span>Navlink< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span> to< /span>=< /span>'< /span>/orders'< /span>< /span>>< /span>< /span>order< /span></< /span>Navlink< /span>< /span>>< /span>< /span>
<< /span>a< /span> aria-current< /span>=< /span>"< /span>page"< /span>< /span> class< /span>=< /span>"< /span>nav - link active"< /span>< /span> href< /span>=< /span>"< /span>/orders"< /span>< /span>>< /span>< /span>order< /span></< /span>a< /span>>< /span>< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/hardcore-babycat-ubh4h?file=%2Fsrc%2Fcomponents%2Fsidebar.jsx< /p>
4 - 2 . active link với tên class is khác khác< /h3>
nếu chúng ta muốn tên class khi được active khác đi nhưactivate< /code> hay current- page< /code>  thì viết kiểu function như này< /p>

import< /span> {< /span> Navlink }< /span> from< /span> ' react - router - dom '< /span>
const< /span> sidebar< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span> navlinkClass< /span> =< /span> (< /span>{< /span>  isActive}< /span>< /span>)< /span> =>< /span> {< /span>

    return< /span>  isActive?< /span> 'nav - link activate'< /span> :< /span> 'nav - link'< /span>

  }< /span>

  return< /span> (< /span>

    << /span>ul< /span>>< /span>< /span>

      < /span><< /span>li< /span>>< /span>< /span>

        < /span><< /span>Navlink< /span>< /span> to< /span>=< /span>'< /span>/'< /span>< /span> className< /span>=< /span>{< /span>navlinkClass}< /span>< /span>>< /span>< /span>Dashboard< /span></< /span>Navlink< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

    < /span></< /span>ul< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/active-link-class-activate-crjtu?file=%2Fsrc%2Fcomponents%2Fsidebar.jsx< /p>
4-3. Active link với style< /h3>
Nếu không muốn trạng thái active viết theo kiểu class mà viết kiểu style thì làm như này< /p>
import< /span> {< /span> Navlink }< /span> from< /span> ' react - router - dom '< /span>
const< /span> sidebar< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span> navlinkStyle< /span> =< /span> (< /span>{< /span>  isActive}< /span>< /span>)< /span> =>< /span> (< /span>{< /span>

    color:< /span>  isActive?< /span> '#fff'< /span> :< /span> ''< /span>,< /span>

    backgroundColor:< /span>  isActive?< /span> '#0d6efd'< /span> :< /span> ''< /span>

  }< /span>)< /span>
  return< /span> (< /span>

    << /span>ul< /span>>< /span>< /span>

      < /span><< /span>li< /span>>< /span>< /span>

        < /span><< /span>Navlink< /span>< /span> to< /span>=< /span>'< /span>/'< /span>< /span> className< /span>=< /span>'< /span>nav - link'< /span>< /span> style< /span>=< /span>{< /span>navlinkStyle}< /span>< /span>>< /span>< /span>

            Dashboard

        < /span></< /span>Navlink< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

    < /span></< /span>ul< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/active-link-style-xbyei?file=%2Fsrc%2Fcomponents%2Fsidebar.jsx< /p>
4-4. Custom active link< /h3>
Nhiều khi đời không như mơ,vì vài lí do nào đó mà chúng ta không thể đặt class active hay style active vào chính thẻ a mà phải đặt ở thẻ cha của nó như thẻ li chẳng hạn< /p>
<< /span>li>< /span>

  << /span>a href=< /span>" / "< /span> class< /span>=< /span>"active"< /span>>< /span>Dashboard<< /span>/< /span>a>< /span>

<< /span>/< /span>li>< /span>
<< /span>li class< /span>=< /span>"active"< /span>>< /span>

  << /span>a href=< /span>" / "< /span>>< /span>Dashboard<< /span>/< /span>a>< /span>

<< /span>/< /span>li>< /span>

< /code>< /pre>
Ví dụ sau trình bày cách tạo một Custom Active  link sử dụng usematch< /code>  vàuseresolvedpath< /code>  trong is react react router< /p>

import< /span> {< /span> link,< /span> usematch,< /span> useresolvedpath }< /span> from< /span> ' react - router - dom '< /span>
const< /span> sidebar< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span> Customlink< /span> =< /span> (< /span>{< /span>  child,< /span>  to,< /span> ...< /span>prop}< /span>< /span>)< /span> =>< /span> {< /span>

    const< /span> resolved =< /span> useresolvedpath< /span>(< /span>to)< /span>

    const< /span> match =< /span> usematch< /span>(< /span>{< /span>   path:< /span> resolved.< /span>pathname,< /span> end:< /span> true< /span> }< /span>)< /span>

    return< /span> (< /span>

      << /span>li< /span> className< /span>=< /span>{< /span>match ?< /span> 'active'< /span> :< /span> ''< /span>}< /span>< /span>>< /span>< /span>

        < /span><< /span>link< /span>< /span> to< /span>=< /span>{< /span>to}< /span>< /span> {< /span>...< /span>props}< /span>< /span>>< /span>< /span>

          < /span>{< /span>children}< /span>

        < /span></< /span>link< /span>< /span>>< /span>< /span>

      < /span></< /span>li< /span>>< /span>< /span>

    )< /span>

  }< /span>
  return< /span> (< /span>

    << /span>ul< /span>>< /span>< /span>

      < /span><< /span>Customlink< /span>< /span> to< /span>=< /span>'< /span>/'< /span>< /span>>< /span>< /span>Dashboard< /span></< /span>Customlink< /span>< /span>>< /span>< /span>

      < /span><< /span>Customlink< /span>< /span> to< /span>=< /span>'< /span>/orders'< /span>< /span>>< /span>< /span>order< /span></< /span>Customlink< /span>< /span>>< /span>< /span>

      < /span><< /span>Customlink< /span>< /span> to< /span>=< /span>'< /span>/products'< /span>< /span>>< /span>< /span>product< /span></< /span>Customlink< /span>< /span>>< /span>< /span>

      < /span><< /span>Customlink< /span>< /span> to< /span>=< /span>'< /span>/customers'< /span>< /span>>< /span>< /span>customer< /span></< /span>Customlink< /span>< /span>>< /span>< /span>

    < /span></< /span>ul< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/proud-sound-83m1q?file=%2Fsrc%2Fcomponents%2Fsidebar.jsx< /p>
5. navigate programmatically< /h2>
Ở các phần ví dụ trên khi người dùng is click click vào các link ởsidebar< /code>  thì is động chuyển trang được rồi nhưng nếu chúng ta muốn chuyển trang tự động thì sao ? Ví dụ chúng ta có một form is họ đăng nhập khi login thành công thì điều hướng họ đến một trang chủ chẳng hạn ,để làm được yêu cầu này chúng ta sử dụng đến hookusenavigate< /code>< /p>

5-1. usenavigate với 1 tham số< /h3>
Ví dụ bên dưới khi click vào button thì sẽ chuyển đến trangorders< /code>< /p>

import< /span> {< /span> usenavigate }< /span> from< /span> ' react - router - dom '< /span>
const< /span> Dashboard< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span>  navigate=< /span> usenavigate< /span>(< /span>)< /span>
  const< /span> handlesubmit< /span> =< /span> e< /span> =>< /span> {< /span>

     e.< /span>preventdefault< /span>(< /span>)< /span>
    navigate< /span>(< /span>'orders'< /span>)< /span>

  }< /span>
  return< /span> (< /span>

    << /span>button< /span> onClick< /span>=< /span>{< /span>handlesubmit}< /span>< /span>>< /span>< /span>submit< /span></< /span>button< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
code demo : https://codesandbox.io/p/devbox/use-navigate-1-f512r?file=%2Fsrc%2Fcomponents%2FDashboard.jsx< /p>
5-2. usenavigate với history< /h3>
Trường hợp bạn muốn sử dụng go< /code>,goBack< /code>,goforward< /code> trong lịch sử trình duyệt.< /p>

import< /span> {< /span> usenavigate }< /span> from< /span> ' react - router - dom '< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  const< /span>  navigate=< /span> usenavigate< /span>(< /span>)< /span>
  return< /span> (< /span>

    << /span>< /span>>< /span>< /span>

      < /span><< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> navigate< /span>(< /span>-< /span>2< /span>)< /span>}< /span>< /span>>< /span>< /span>Go 2 pages back< /span></< /span>button< /span>>< /span>< /span>

      < /span><< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> navigate< /span>(< /span>-< /span>1< /span>)< /span>}< /span>< /span>>< /span>< /span>Go back< /span></< /span>button< /span>>< /span>< /span>

      < /span><< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> navigate< /span>(< /span>1< /span>)< /span>}< /span>< /span>>< /span>< /span>Go forward< /span></< /span>button< /span>>< /span>< /span>

      < /span><< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> navigate< /span>(< /span>2< /span>)< /span>}< /span>< /span>>< /span>< /span>Go 2 pages forward< /span></< /span>button< /span>>< /span>< /span>

    < /span></< /span>< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/use-navigate-2-885g1?file=%2Fsrc%2Fcomponents%2Forder.jsx< /p>
5-3. usenavigate với  replace true< /h3>
Sử dụng tham số thứ hai của navigate< /code> để chỉ thay đổi URL chứ không muốn URL đó lưu lại trong lịch sử trình duyệt. Kiểu như tại trang A đi tới trang B,tại trang B chúng ta click back trên trình duyệt thì sẽ không quay trở lại trang A nữa.< /p>

import< /span> {< /span> usenavigate }< /span> from< /span> ' react - router - dom '< /span>
const< /span> Dashboard< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span>  navigate=< /span> usenavigate< /span>(< /span>)< /span>

  return< /span> (< /span>

    << /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> navigate< /span>(< /span>'orders'< /span>,< /span> {< /span>  replace:< /span> true< /span> }< /span>)< /span>}< /span>< /span>>< /span>< /span>

      Go  to order

    < /span></< /span>button< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/modest-dan-sb4oi?file=%2Fsrc%2Fcomponents%2FDashboard.jsx< /p>
5-4. usenavigate với passing data< /h3>

Tình huống đặt ra là tại componenta< /code> khi  navigatechuyển sang componentB< /code> sẽ kèm thêm một id là 6996< /li>
tạicomponentB< /code> sẽ nhận được data thông qua uselocation< /code>< /li>

< /ul>
import< /span> {< /span> usenavigate }< /span> from< /span> ' react - router - dom '< /span>
const< /span> componenta< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span>  navigate=< /span> usenavigate< /span>(< /span>)< /span>
  return< /span> (< /span>

    << /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> navigate< /span>(< /span>" order "< /span>,< /span> {< /span> state:< /span> {< /span> id:< /span> "6996"< /span> }< /span> }< /span>)< /span>}< /span>< /span>>< /span>< /span>

      Send ID  to componentB

    < /span></< /span>button< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
import< /span> {< /span> uselocation }< /span> from< /span> ' react - router - dom '< /span>
const< /span> ComponentB< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span> location =< /span> uselocation< /span>(< /span>)< /span>

  return< /span> << /span>h1< /span>>< /span>< /span>ID nhận từ componenta: < /span>{< /span>location.< /span>state?.< /span>id}< /span></< /span>h1< /span>>< /span>< /span>

}< /span>

< /code>< /pre>
code demo : https://codesandbox.io/p/devbox/use-navigate-4-5vvsgv?file=%2fsrc%2fcomponents%2fcomponenta.jsx< /p>
5-5. Component navigate< /h3>
Sử dụng component navigate để chuyển trang< /p>
import< /span> {< /span> navigate }< /span> from< /span> ' react - router - dom '< /span>

import< /span>  Dashboardfrom< /span> './Dashboard'< /span>
const< /span> Privateroute< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span>  isAuth=< /span> true< /span>
  return< /span>  isAuth?< /span> << /span>Dashboard< /span>< /span> />< /span>< /span> :< /span> << /span>navigate< /span>< /span> to< /span>=< /span>'< /span>/login'< /span>< /span> />< /span>< /span>

}< /span>

< /code>< /pre>
6 . Not find route - 404< /h2>
Trường hợp này xảy ra nếu người dùng nhập vào một URL không hợp lệ như  https://example.com/abcdef< /code> thì chúng ta sẽ điều hướng tới trang 404. Chúng ta để  Not find route< /code> này ở dưới cùng để nếu các route ở trên không cái nào trùng khớp thì sẽ đến route này.< /p>

<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>*'< /span>< /span> element< /span>=< /span>{< /span><< /span>NotFound< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/not-found-route-404-y5gjs?file=%2Fsrc%2FApp.jsx< /p>
7 . Nested route< /h2>
Nested route để lồng component con vào trong component cha .< /p>
<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/products'< /span>< /span> element< /span>=< /span>{< /span><< /span>product< /span>< /span> />< /span>< /span>}< /span>< /span>>< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>laptop'< /span>< /span> element< /span>=< /span>{< /span><< /span>laptop< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>desktop'< /span>< /span> element< /span>=< /span>{< /span><< /span>Desktop< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span></< /span>route< /span>< /span>>< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
import< /span> {< /span>  Outlet}< /span> from< /span> ' react - router - dom '< /span>
const< /span> product< /span> =< /span> (< /span>)< /span> =>< /span> (< /span>

  << /span>< /span>>< /span>< /span>

    < /span><< /span>h1< /span>>< /span>< /span>product< /span></< /span>h1< /span>>< /span>< /span>

    < /span><< /span>Outlet< /span>< /span> />< /span>< /span>

  < /span></< /span>< /span>>< /span>< /span>

)< /span>

< /code>< /pre>
Như code ở trên< /p>

Nếu is truy truy cập vào localhost:3000 sẽ load componentDashboard< /code>< /li>
Nếu truy cập vào localhost:3000/products sẽ load component product< /code>< /li>
Nếu truy cập vào localhost:3000/products/laptop sẽ load  product< /code>  bên trong có componentlaptop< /code>< /li>
Nếu truy cập vào localhost:3000/products/desktop sẽ load  product< /code>  bên trong có componentDesktop< /code>< /li>
lưu ý tại component cha làproduct< /code> ta sử dụng Outlet< /code> để xác định vị trí hiển thị component con khi route trùng khớp< /li>
Code demo: https://codesandbox.io/p/devbox/nested-route-ub8ee?file=%2Fsrc%2FApp.jsx< /li>

< /ul>
8. Index route< /h2>

Như ví dụ ở trên thì khi truy cập vào localhost:3000/products sẽ load component product< /code>   vàkhông is conponent hiển thị conponent con nào cả< /li>
Điều chúng ta mong muốn là vẫn URL như vậy nhưng hiển thị một conponent con nào đó ở ngay component cha< /li>
Để làm được điều này ta sử dụng index  vàtruyền conponent con muốn được hiển thị< /li>
Ví dụ bên dưới : nếu is truy truy cập vàolocalhost:3000/products< /code> sẽ load component product< /code>  bên trong có componentBestSeller< /code>< /li>

< /ul>
<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/products'< /span>< /span> element< /span>=< /span>{< /span><< /span>product< /span>< /span> />< /span>< /span>}< /span>< /span>>< /span>< /span>

    < /span><< /span>route< /span>< /span> index< /span> element< /span>=< /span>{< /span><< /span>BestSeller< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>laptop'< /span>< /span> element< /span>=< /span>{< /span><< /span>laptop< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>desktop'< /span>< /span> element< /span>=< /span>{< /span><< /span>Desktop< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span></< /span>route< /span>< /span>>< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
9 . dynamic route< /h2>
<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses'< /span>< /span> element< /span>=< /span>{< /span><< /span>Courses< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses/:courseid'< /span>< /span> element< /span>=< /span>{< /span><< /span>CourseDetail< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
import< /span> {< /span> useparams }< /span> from< /span> ' react - router - dom '< /span>
const< /span> CustomerDetail< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span> params =< /span> useparams< /span>(< /span>)< /span>

  return< /span> << /span>h2< /span>>< /span>< /span>Chi tiết khóa học :< /span>{< /span>params.< /span>courseId}< /span></< /span>h2< /span>>< /span>< /span>

}< /span>

< /code>< /pre>

Dynamic route giúp chúng ta giải quyết các route động,route thay đổi theo một cấu trúc đã được định nghĩa sẵn.< /li>
Ví dụ ta có URL theo kiểu courses/html< /code>,course / css< /code>,courses/javascript< /code> thì có thể mô hình hóa nó thành courses/:courseid< /code>< /li>
tạiCourseDetail< /code> ta sử dụng hook useparams để lấy tham số trên URL.< /li>
Nếu ta định nghĩa route là courses/:courseid< /code>  thì lúc lấy giá trị cũng lấy đúng tên làparams.courseid< /code>< /li>
Code demo: https://codesandbox.io/p/devbox/dynamic-route-1iedr?file=%2Fsrc%2FApp.jsx< /li>

< /ul>
9-1. Dynamic route với các route cố định< /h3>
<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses'< /span>< /span> element< /span>=< /span>{< /span><< /span>Courses< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses/:courseid'< /span>< /span> element< /span>=< /span>{< /span><< /span>CourseDetail< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses/add-course'< /span>< /span> element< /span>=< /span>{< /span><< /span>AddCourse< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses/edit-course'< /span>< /span> element< /span>=< /span>{< /span><< /span>EditCourse< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
9-2. Multiple dynamic route< /h3>
<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses'< /span>< /span> element< /span>=< /span>{< /span><< /span>Courses< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses/:courseType/'< /span>< /span> element< /span>=< /span>{< /span><< /span>CourseType< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/courses/:courseType/:courseId'< /span>< /span> element< /span>=< /span>{< /span><< /span>CourseDetail< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
10. Search params< /h2>
import< /span> {< /span>  usesearchparam}< /span> from< /span> ' react - router - dom '< /span>
let< /span> [< /span>searchparam,< /span> setsearchparams]< /span> =< /span> usesearchparam< /span>(< /span>)< /span>

< /code>< /pre>
Hook  usesearchparamđược sử dụng để đọc  vàsửa đổi query string trên URL,hook này trả về một mảng gồm hai giá trị: tham số tìm kiếm  vàmột hàm để thay đổi.< /p>
Để thay đổi searchparam< /p>
<< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> setsearchparams< /span>(< /span>{< /span>product:< /span> ' laptop '< /span>}< /span>)< /span>}< /span>< /span>>< /span>< /span>

  laptop

< /span></< /span>button< /span>>< /span>< /span>

<< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> setsearchparams< /span>(< /span>{< /span>product:< /span> ' laptop '< /span>,< /span>  stock:< /span> 'in-stock'< /span>}< /span>)< /span>}< /span>< /span>>< /span>< /span>

  Còn hàng

< /span></< /span>button< /span>>< /span>< /span>

<< /span>button< /span> onClick< /span>=< /span>{< /span>(< /span>)< /span> =>< /span> setsearchparams< /span>(< /span>{< /span>}< /span>)< /span>}< /span>< /span>>< /span>< /span>

  Clear

< /span></< /span>button< /span>>< /span>< /span>

< /code>< /pre>

Khi click vào button laptop  =>  https://example.com/?product=laptop< /code>< /li>
Khi click vào button Còn hàng => https://example.com/?product=laptop&stock=in-stock< /code>< /li>
Khi click vào button Clear => https://example.com< /code>< /li>

< /ul>
Để đọc searchparam< /p>
const< /span> productType =< /span> searchparam.< /span>get< /span>(< /span>'product'< /span>)< /span>;< /span>

const< /span>   stock=< /span> searchparam.< /span>get< /span>(< /span>'stock'< /span>)< /span>;< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/search-params-9s77sh?file=%2Fsrc%2Fcomponents%2FDashboard.jsx< /p>
11. Protected route< /h2>
Giả sử ứng dụng của chúng ta có hai phần: public  vàprivate< /p>

Phần public thì ai cũng có thể truy cập được như trang chủ,tin tức...< /li>
Phần private thì phải đăng nhập vào mới xem được như trang cá nhân,trang account...< /li>

< /ul>
Về hành vi đối với người dùng< /p>

Nếu đăng nhập rồi thì truy cập được tất cả các link của public hay private< /li>
Nếu chưa thì chỉ truy cập được các trang public,nếu người dùng vẫn cố truy cập vào các trang private thì ta điều hướng họ sang trang login hay trang nào thì tùy nghiệp vụ.< /li>

< /ul>
Bước 1: Nhóm các route cần bảo vệ vào trong Privateroute< /p>
<< /span>route< /span>< /span>>< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Home< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/news'< /span>< /span> element< /span>=< /span>{< /span><< /span>News< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span> element< /span>=< /span>{< /span><< /span>Privateroute< /span>< /span> />< /span>< /span>}< /span>< /span>>< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/personal'< /span>< /span> element< /span>=< /span>{< /span><< /span>Personal< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/account'< /span>< /span> element< /span>=< /span>{< /span><< /span>Account< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span></< /span>route< /span>< /span>>< /span>< /span>

< /span></< /span>route< /span>< /span>>< /span>< /span>

< /code>< /pre>
Bước 2: Trong Privateroute sẽ kiểm tra login hay chưa để xử lý< /p>
import< /span> {< /span> navigate,< /span>  Outlet}< /span> from< /span> ' react - router - dom '< /span>
const< /span> Privateroute< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span>  isAuth=< /span> true< /span>
  return< /span>  isAuth?< /span> << /span>Outlet< /span>< /span> />< /span>< /span> :< /span> << /span>navigate< /span>< /span> to< /span>=< /span>'< /span>/login'< /span>< /span> />< /span>< /span>

}< /span>

< /code>< /pre>
Code demo: https://codesandbox.io/p/devbox/protected-route-wnd2p2?file=%2Fsrc%2FApp.jsx< /p>
12. Lazy loading< /h2>
Lazy Loading là một kỹ thuật để tối ưu hoá ứng dụng,khi chuyển trang ứng dụng sẽ chỉ load những component cần thiết,điều này giúp trang web chuyển động mượt mà,nhanh chóng,tăng trải nghiệm người dùng.< /p>
Code bên dưới khi CHƯA áp dụng Lazy Loading cho componentAbout< /code>< /p>

import< /span> {< /span> route,< /span> route }< /span> from< /span> ' react - router - dom '< /span>

import< /span>  Dashboardfrom< /span> ' ./components /  Dashboard'< /span>

import< /span> About from< /span> './components/About'< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  return< /span> (< /span>

    << /span>route< /span>< /span>>< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/about'< /span>< /span> element< /span>=< /span>{< /span><< /span>About< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span></< /span>route< /span>< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
Còn bên dưới khi đã áp dụng Lazy Loading cho component About< /code>< /p>

import< /span> React from< /span> ' react '< /span>

import< /span> {< /span> route,< /span> route }< /span> from< /span> ' react - router - dom '< /span>

import< /span>  Dashboardfrom< /span> ' ./components /  Dashboard'< /span>

const< /span>  LazyAbout=< /span> React.< /span>lazy< /span>(< /span>(< /span>)< /span> =>< /span> import< /span>(< /span>'./components/About'< /span>)< /span>)< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  return< /span> (< /span>

    << /span>route< /span>< /span>>< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span><< /span>route< /span>< /span>

        path< /span>=< /span>'< /span>/about'< /span>< /span>

        element< /span>=< /span>{< /span>

          << /span>react . suspense< /span>< /span> fallback< /span>=< /span>{< /span><< /span>div< /span>>< /span>< /span>Loading...< /span></< /span>div< /span>>< /span>< /span>}< /span>< /span>>< /span>< /span>

            < /span><< /span>LazyAbout< /span>< /span> />< /span>< /span>

          < /span></< /span>react . suspense< /span>< /span>>< /span>< /span>

        }< /span>< /span>

      />< /span>< /span>

    < /span></< /span>route< /span>< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
code demo : https://codesandbox.io/p/devbox/lazy-loading-qdi5n?file=%2Fsrc%2FApp.jsx< /p>
Để áp dụng kĩ thuật Lazy Loading chúng ta cần :< /p>

Dynamic import trong React< /li>
React.lazy()< /code>< /li>
react . suspense()< /code>< /li>
Vì ứng dụng sử dụng create-react-app< /code> nên đã cài đặt  vàcấu hình sẵn webpack< /code>< /li>
Khi ta dùngimport About from './components/About'< /code> thì webpack đã đóng gói nó cả trong một file js ban đầu nên khá nặng.< /li>
Khi người dùng lần đầu tiên vào ứng dụng thì sẽ phải tải  vàthực thi code bên trong nên sẽ mất thời gian.< /li>
Việc sử dụng Lazy Load< /code> thì ta đã tách riêng file js của trang About< /code>  theo kiểu code splitting ra khỏi file js ban đầu .< /li>
Khi người dùng vào  trang /about< /code> thì hiện loading  vàbắt đầu tải,thực thi file js riêng này.< /li>

< /ul>
13. route Objects< /h2>
Hook useroute cho phép bạn xác định các tuyến đường dưới dạng javascript object thuần  thay cho <route>< /code>  và<route>< /code>. Đây chỉ là một phong cách tùy chọn cho những người không muốn sử dụng JSX< /p>

code bên dưới áp dụng<route>< /code>  và<route>< /code>< /p>

import< /span> {< /span> route,< /span> route }< /span> from< /span> ' react - router - dom '< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  return< /span> (< /span>

    << /span>route< /span>< /span>>< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/products'< /span>< /span> element< /span>=< /span>{< /span><< /span>product< /span>< /span> />< /span>< /span>}< /span>< /span>>< /span>< /span>

        < /span><< /span>route< /span>< /span> index< /span> element< /span>=< /span>{< /span><< /span>BestSeller< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

        < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>laptop'< /span>< /span> element< /span>=< /span>{< /span><< /span>laptop< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

        < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>desktop'< /span>< /span> element< /span>=< /span>{< /span><< /span>Desktop< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

      < /span></< /span>route< /span>< /span>>< /span>< /span>

      < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>*'< /span>< /span> element< /span>=< /span>{< /span><< /span>NoMatch< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span></< /span>route< /span>< /span>>< /span>< /span>

  )< /span>

}< /span>

< /code>< /pre>
code bên dưới áp dụnghook useroute< /code>< /p>

import< /span> {< /span> useroute }< /span> from< /span> ' react - router - dom '< /span>
const< /span> route =< /span> [< /span>

  {< /span>   path:< /span> ' / '< /span>,< /span>  element:< /span> << /span>Dashboard< /span>< /span> />< /span>< /span> }< /span>,< /span>

  {< /span>

       path:< /span> ' /products '< /span>,< /span>

      element:< /span> << /span>product< /span>< /span> />< /span>< /span>,< /span>

     child:< /span> [< /span>

      {< /span> index:< /span> true< /span>,< /span>  element:< /span> << /span>BestSeller< /span>< /span> />< /span>< /span> }< /span>,< /span>

      {< /span>   path:< /span> ' laptop '< /span>,< /span>  element:< /span> << /span>laptop< /span>< /span> />< /span>< /span> }< /span>,< /span>

      {< /span>   path:< /span> ' desktop '< /span>,< /span>  element:< /span> << /span>Desktop< /span>< /span> />< /span>< /span> }< /span>

    ]< /span>

  }< /span>,< /span>

  {< /span>   path:< /span> '*'< /span>,< /span>  element:< /span> << /span>NoMatch< /span>< /span> />< /span>< /span> }< /span>

]< /span>
export< /span> default< /span> function< /span> App< /span>(< /span>)< /span> {< /span>

  const< /span>  element =< /span> useroute< /span>(< /span>route)< /span>
  return< /span>  element

}< /span>

< /code>< /pre>
code demo : https://codesandbox.io/p/devbox/route-objects-dvfdwx?file=%2fsrc%2fapp.jsx< /p>
14. Scroll  to  top< /h2>
Trong thực tế chúng ta hay gặp phải trường hợp đang ở trang A  vàcuộn đến cuối trang này,khi chuyển sang trang B thì thanh cuộn vẫn ở dưới gây chút khó chịu. Demo tại đây: https://codesandbox.io/p/devbox/async-feather-mg2o39?file=%2Fsrc%2Fcomponents%2FPart1.jsx< /p>
Để fix vấn đề này chúng ta có thể tạo 1 component scrolltotop< /code>  vàthêm nó vào trong đoạn config route< /code>< /p>

<< /span>div< /span>>< /span>< /span>

  < /span><< /span>scrolltotop< /span>< /span> />< /span>< /span>

  < /span><< /span>route< /span>< /span>>< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/'< /span>< /span> element< /span>=< /span>{< /span><< /span>Dashboard< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/orders'< /span>< /span> element< /span>=< /span>{< /span><< /span>order< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

    < /span><< /span>route< /span>< /span> path< /span>=< /span>'< /span>/products'< /span>< /span> element< /span>=< /span>{< /span><< /span>product< /span>< /span> />< /span>< /span>}< /span>< /span> />< /span>< /span>

  < /span></< /span>route< /span>< /span>>< /span>< /span>

< /span></< /span>div< /span>>< /span>< /span>

< /code>< /pre>
import< /span> {< /span> useEffect }< /span> from< /span> ' react '< /span>

import< /span> {< /span> uselocation }< /span> from< /span> ' react - router - dom '< /span>
const< /span> scrolltotop< /span> =< /span> (< /span>)< /span> =>< /span> {< /span>

  const< /span> {< /span>    pathname}< /span> =< /span> uselocation< /span>(< /span>)< /span>
  useEffect< /span>(< /span>(< /span>)< /span> =>< /span> {< /span>

    window &&< /span> window.< /span>scrollTo< /span>(< /span>0< /span>,< /span> 0< /span>)< /span>

  }< /span>,< /span> [< /span>pathname]< /span>)< /span>
  return< /span> null< /span>

}< /span>
export< /span> default< /span> scrolltotop

< /code>< /pre>
Demo đã fix lỗi tại đây: https://codesandbox.io/p/devbox/scroll-to-top-ngon-vwhklx?file=%2Fsrc%2Fcomponents%2FPart1.jsx< /p>
15. Can't setState on unmounted component< /h2>

Khi chúng ta đang ở trang Home  vàlấy dữ liệu từ API< /li>
Dữ liệu chưa GET xong thì người dùng chuyển sang trang About< /li>
Component Home lúc đó đã bị unmount< /li>
Sau đó dữ liệu từ API được trả về  vàsetState()< /li>
Component Home không còn để update< /li>

< /ul>

async< /span> function< /span> handlesubmit< /span>(< /span>)< /span> {< /span>

  setpende< /span>(< /span>true< /span>)< /span>

  await< /span> post< /span>(< /span>'/someapi'< /span>)< /span>

  setpende< /span>(< /span>false< /span>)< /span>

}< /span>

< /code>< /pre>
let< /span>  isMountedRef=< /span> useRef< /span>(< /span>false< /span>)< /span>

useEffect< /span>(< /span>(< /span>)< /span> =>< /span> {< /span>

  isMountedRef.< /span>current=< /span> true< /span>

  return< /span> (< /span>)< /span> =>< /span> {< /span>

    isMountedRef.< /span>current=< /span> false< /span>

  }< /span>

}< /span>,< /span> [< /span>]< /span>)< /span>
async< /span> function< /span> handlesubmit< /span>(< /span>)< /span> {< /span>

  setpende< /span>(< /span>true< /span>)< /span>

  await< /span> post< /span>(< /span>'/someapi'< /span>)< /span>

  if< /span> (< /span>isMountedRef.< /span>current)< /span> {< /span>

    setpende< /span>(< /span>false< /span>)< /span>

  }< /span>

}< /span>

< /code>< /pre>

Bài viết đến đây là hết,hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!< /p>

Liên is hệ hệ : trungnt256< /li>
Hướng dẫn sử dụng Font Awesome 5 bản miễn phí tại đây< /li>
Hướng dẫn tìm hiểu SCSS cơ bản tại đây< /li>

< /ul>