Sử dụng react-router-dom v6.3.0 để định nghĩa hệ thống routing trong ứng dụng React của mình. Cài đặt thư viện sau
npm install react-router-domỞ đây mình chỉ chia sẻ các bạn thường gặp trong một số trường hợp thôi, tạo cho route nó nhìn maintain hơn xíu thôi
Ví dụ:
<Routes>
<Route path="/home" element={<Home />} />
<Route index element={<Home />} />
<Route path="category" element={<Category />}>
<Route path=":categoryID" element={<CategoryID />} />
<Route index element={<DefaultCategory/>} />
</Route>
<Route path="post/:slug" element={<Content />} />
<Route path="comments" element={<Comment />} />
</Routes>Các route trên thì có chổ category là hơi khác biệt với mọi route khác
path="category": Khi người dùng truy cập /category, nó sẽ hiển thị <Category />.
Nested Route (các route con của /category):
+ path=":categoryID": Khi truy cập /category/something, component <CategoryID /> sẽ được hiển thị, với :categoryID là tham số động.
+ index (tương đương /category): Nếu người dùng vào /category mà không có :categoryID, component <DefaultCategory /> sẽ được hiển thị.
Với cách dùng chổ Route Category, chúng ta có thể dựa vào nó mà phát triển cho các chức năng trong Admin như (CRUD) [Thêm, Read, Update, Delete]
Thì như vậy project của ta các Route sẽ được nhóm lại với nhau, như vậy dễ xử lý và chỉnh sửa sau này,
Trên là chỉ một cách mà mình hay dùng, có thể còn nhiều cách khác. Mọi người tìm hiểu thêm nghe