![]() ![]() We memoize the MyNavLink component in order to avoid unnecessary re-renders (see this). import >Īnd then I’d use it in a Router like this: Ī few things about the code. Second, you use NavLink in order to render links that will display as active whenever the URL is matching the current page URL. Full disclaimer, I’m a React & TypeScript newbie, so the following explanation and examples might seem too obvious for some more experienced, but anyway, maybe it helps someone, so.įirst, I was using react-router-dom v6 and MUI v5 for this example, if you’re using different versions of these packages, you may need a different implementation. Although the documentation on the MUI website provides a few examples on how to achieve a similar result with the Link component (from react-router-dom), I still ran into a couple issues and needed to spend a few hours to figure out what was going on. So, recently I needed to render a React Router NavLink component as a ListItemButton. ![]() Tôi hy vọng tôi đã khuyến khích bạn sử dụng RTK với Typescript trong project tiếp theo của các bạn.DecemUsing React Router NavLink with a MUI ListItemButton + TypeScript Import Navbar from './components/Navbar' Ĭuối cùng là hình ảnh demo project của chúng ta.īây giờ chúng ta đã có một project nhỏ sử dụng React, Typescript và Redux Toolkit. Import reportWebVitals from './reportWebVitals' Yarn add framer-motion react-redux react-router-dom uuid trúc folderĬhúng tôi sẽ thiết lập Provider cho UI Redux và Chakra của mình. Giả sử bạn có kiến thức cơ bản về React và React Router. ![]() Tôi hy vọng vào cuối bài viết này, Tôi hy vọng vào cuối bài viết này, bạn sẽ áp dụng được RTK và Typescript để bắt đầu dự án tiếp theo của mình với những công nghệ này. Chúng tôi cũng sẽ sử dụng react-router-dom để điều hướng giữa các trang và giao diện Chakra UI. Tôi sẽ không đi sâu vào chi tiết của Redux, mà là chỉ ra cách RTK (Redux Toolkit). Mục tiêu là xây dựng một ứng dụng CRUD cơ bản, nơi chúng ta lưu trữ các tác giả và tên của cuốn sách, tôi sẽ chứng minh sự dễ dàng của việc sử dụng Typescript với các công nghệ khác. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách sử dụng React, Typescript và Redux Toolkit. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2022
Categories |