- vừa được xem lúc

React router V6

0 0 376

Người đăng: kentrung

Theo Viblo Asia

React router 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 máy khách, 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, các ví dụ được viết và chỉnh sửa trên codesandbox để dễ theo dõi.

1. Cài đặt

# Tạo một react app
npx create-react-app router-tutorial # Cài dependencies
cd router-tutorial
npm install _@.com
  • Thêm bootstrap v5 vào file public/index.html

2. Giao diện và cấu trúc component

  • Giao diện image.png

  • Cấu trúc component

- App |-- Sidebar |-- Content

3. Configuring Routes

Đầ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 BrowserRouter và bọc nó bên ngoài component chính của toàn bộ ứng dụng chính là component App

import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom' const rootElement = document.getElementById('root')
ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, rootElement
)

Tại component Sidebar ở giao diện ban đầu chúng ta mới chỉ sử dụng thẻ a, giờ sẽ chuyển những thẻ đó sang thẻ điều hướng <Link>

import { Link } from 'react-router-dom' const Sidebar = () => { return ( <ul className="nav nav-pills flex-column"> <li className="nav-item"> <Link to="/" className="nav-link">Dashboard</Link> </li> <li className="nav-item"> <Link to="/orders" className="nav-link">Orders</Link> </li> <li className="nav-item"> <Link to="/products" className="nav-link">Products</Link> </li> <li className="nav-item"> <Link to="/customers" className="nav-link">Customers</Link> </li> </ul> )
} export default Sidebar

Như vậy tại Sidebar chúng ta đã điều hướng sang các URL khác nhau, giờ với các URL đó sẽ load các component tương ứng, tại component App sửa lại

import { Routes, Route } from 'react-router-dom' export default function App() { return ( <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/orders" element={<Orders />} /> <Route path="/products" element={<Products />} /> <Route path="/customers" element={<Customers />} /> </Routes> )
}

Code tại đây: https://codesandbox.io/s/configuring-routes-c87nm

4. Active Link

Ở phần trước tại component Sidebar khi chúng ta sử dụng <Link> như này thì output thực tế ra HTML như này

<Link className="nav-link" to="/orders">Orders</Link> === html ===
<a class="nav-link" href="/orders">Orders</a>

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

4-1. Active link với tên class là active

Nếu class tên là active thì khá là đơn giản, nhẹ nhàng chúng ta chỉ việc thay <Link> thành <NavLink>, các bạn sẽ thấy việc output ra html cũng đã khác nhau rồi.

<NavLink className="nav-link" to="/orders">Orders</NavLink> === html ===
<a aria-current="page" class="nav-link active" href="/orders">Orders</a>

Code tại đây: https://codesandbox.io/s/active-link-class-active-ubh4h?file=/src/components/Sidebar.js

4-2. Active link với tên class khác

Nếu chúng ta muốn tên class khi được active khác đi chẳng hạn như activated hay current-page thì viết kiểu function như này

import { NavLink } from 'react-router-dom' const Sidebar = () => { const navLinkClass = ({ isActive }) => { return isActive ? "nav-link activated" : "nav-link" } return ( <ul className="nav nav-pills flex-column"> <li className="nav-item"> <NavLink to="/" className={navLinkClass}>Dashboard</NavLink> </li> </ul> )
} export default Sidebar

Code tại đây: https://codesandbox.io/s/active-link-class-activated-crjtu?file=/src/components/Sidebar.js

4-3. Active link với style

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

import { NavLink } from 'react-router-dom' const Sidebar = () => { const navLinkStyle = ({ isActive }) => { return { color: isActive ? "#fff" : "", backgroundColor: isActive ? "#0d6efd" : "" } } return ( <ul className="nav nav-pills flex-column"> <li className="nav-item"> <NavLink to="/" className="nav-link" style={navLinkStyle}> Dashboard </NavLink> </li> </ul> )
} export default Sidebar

Code tại đây: https://codesandbox.io/s/active-link-style-xbyei?file=/src/components/Sidebar.js

4-4. Custom active link

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 vào chính thẻ a mà phải đặt ở thẻ cha của nó như thẻ li chẳng hạn

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

Ví dụ sau trình bày cách tạo một Custom Active Link sử dụng hook useMatch()useResolvedPath()

import { Link, useMatch, useResolvedPath } from 'react-router-dom' const Sidebar = () => { const CustomLink = ({ children, to, ...props }) => { let resolved = useResolvedPath(to) let match = useMatch({ path: resolved.pathname, end: true }) return ( <li className={match ? "nav-item active" : "nav-item"}> <Link className="nav-link" to={to} {...props}> {children} </Link> </li> ) } return ( <ul className="nav nav-pills flex-column"> <CustomLink to="/">Dashboard</CustomLink> <CustomLink to="/orders">Orders</CustomLink> <CustomLink to="/products">Products</CustomLink> <CustomLink to="/customers">Customers</CustomLink> </ul> )
} export default Sidebar

Code tại đây: https://codesandbox.io/s/custom-active-link-83m1q?file=/src/components/Sidebar.js

5. Navigate programmatically

Ở các phần ví dụ trên khi người dùng click vào các link ở Sidebar thì chuyển trang được rồi nhưng nếu trường hợp chúng ta muốn chuyển trang tự động thì sao? Ví dụ chúng ta có một form đăng nhập khi login thành công thì chuyển hướng họ đến một trang nào đó. Để làm được yêu cầu này chúng ta sử dụng đến hook useNavigate

5-1. useNavigate với 1 tham số

Ví dụ bên dưới khi click vào button thì sẽ chuyển đến trang orders

import { useNavigate } from 'react-router-dom' export const Dashboard = () => { const navigate = useNavigate() return ( <button onClick={() => navigate('orders')}> Go to Orders </button> )
}

Code demo tại đây: https://codesandbox.io/s/use-navigate-1-f512r?file=/src/components/Dashboard.js

5-2. useNavigate với back history

Sử dụng navigate(-1) sẽ tương đương với việc nhấn nút back trên trình duyệt để trở về trang trước trong lịch sử trình duyệt.

import { useNavigate } from 'react-router-dom' export const Dashboard = () => { const navigate = useNavigate() return ( <button onClick={() => navigate(-1)}> Go back </button> )
}

Code demo tại đây: https://codesandbox.io/s/use-navigate-2-885g1?file=/src/components/Orders.js

5-3. useNavigate với replace true

Sử dụng tham số thứ hai của navigate để có muốn lưu lại lịch sử trình duyệt hay không? Kiểu như từ trang A chuyển sang trang B, khi click back thì về trang A nhưng với tham số này thì không còn chuyện đó nữa.

import { useNavigate } from 'react-router-dom' export const Dashboard = () => { const navigate = useNavigate() return ( <button onClick={() => navigate('orders', {replace: true})}> Go to Orders </button> )
}

Code demo tại đây: https://codesandbox.io/s/use-navigate-3-sb4oi?file=/src/components/Dashboard.js

6. Còn tiếp

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 81

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 106

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 41

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 36

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 38

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 67