Semantic Router trong phát triển web giúp tạo ra các đường dẫn URL có ý nghĩa, rõ ràng và dễ hiểu. Những đường dẫn này không chỉ giúp người dùng dễ dàng hình dung nội dung mà họ sẽ truy cập mà còn tăng cường khả năng tối ưu hóa cho công cụ tìm kiếm (SEO). Các framework như React, Angular, Next.js đều tích hợp semantic router để quản lý và điều hướng ứng dụng web một cách dễ dàng hơn.
/?id=123&action=view, bạn sẽ có các URL như /posts/123/view dễ hiểu hơn.Để thiết lập semantic routing trong ứng dụng React, bạn thường sử dụng thư viện như react-router-dom. Đây là cách quản lý các route với những đường dẫn có ý nghĩa trong React.
react-router-domBạn có thể cài đặt react-router-dom bằng lệnh sau:
npm install react-router-dom
Sau khi đã cài đặt, bạn có thể thiết lập các route với các URL dễ hiểu. Dưới đây là một ví dụ về cách thiết lập các route cơ bản trong React:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import PostPage from './PostPage';
import EditPostPage from './EditPostPage';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/posts/:id" component={PostPage} />
<Route path="/posts/:id/edit" component={EditPostPage} />
</Switch>
</Router>
);
}
export default App;
Ở đây:
/ đại diện cho trang chủ của bạn./posts/:id là một route semantic, với :id là một tham số động cho phép bạn tải một bài viết cụ thể./posts/:id/edit dùng để chỉnh sửa bài viết, với :id là ID của bài viết cần chỉnh sửa.react-router-dom.path và component để hiển thị khi người dùng truy cập URL tương ứng.Với react-router-dom, bạn có thể truy cập tham số động (:id) trong các route thông qua useParams. Dưới đây là ví dụ về cách bạn có thể lấy tham số ID từ URL:
import React from 'react';
import { useParams } from 'react-router-dom';
function PostPage() {
let { id } = useParams();
return (
<div>
<h1>Bài viết số {id}</h1>
<p>Đây là nội dung của bài viết.</p>
</div>
);
}
export default PostPage;
Ở đây:
useParams là một hook của react-router-dom giúp bạn lấy các tham số động từ URL.id lấy từ URL và được sử dụng để hiển thị nội dung bài viết tương ứng.Để điều hướng giữa các trang trong React, bạn có thể sử dụng useHistory hoặc Link. Cả hai cách này đều cho phép người dùng điều hướng mượt mà mà không cần tải lại trang.
Link để điều hướng:
import React from 'react';
import { Link } from 'react-router-dom';
function HomePage() {
return (
<div>
<h1>Trang chủ</h1>
<Link to="/posts/123">Xem bài viết 123</Link>
</div>
);
}
export default HomePage;
Link là một thành phần thay thế cho thẻ <a> thông thường, nhưng không tải lại toàn bộ trang mà chỉ cập nhật nội dung phù hợp.useHistory để điều hướng chương trình:
import React from 'react';
import { useHistory } from 'react-router-dom';
function EditPostPage() {
let history = useHistory();
const savePost = () => {
// Lưu bài viết...
// Sau khi lưu xong, điều hướng về trang bài viết
history.push(`/posts/123`);
};
return (
<div>
<h1>Chỉnh sửa bài viết</h1>
<button onClick={savePost}>Lưu</button>
</div>
);
}
export default EditPostPage;
useHistory cho phép điều hướng từ chương trình một cách linh hoạt. Sau khi thực hiện một hành động (như lưu dữ liệu), bạn có thể tự động điều hướng đến một trang khác.Semantic Router là một phần không thể thiếu trong việc phát triển ứng dụng web hiện đại, giúp quản lý các route một cách rõ ràng và dễ hiểu hơn. Việc áp dụng semantic routing không chỉ cải thiện trải nghiệm người dùng mà còn giúp tối ưu hóa SEO và tạo sự linh hoạt trong quá trình phát triển ứng dụng.
Bằng cách hiểu và tận dụng hiệu quả semantic routing, bạn có thể xây dựng các ứng dụng web mạnh mẽ, thân thiện với người dùng và dễ quản lý.
