Url trong react và show html trong react
Việc get thông tin từ url trong react là 1 vấn đề thường xuyên gặp của các lập trình viên .Dưới đây sẽ là cách đọc url_params trong react
Đầu tiên chúng ta cấu hình ở phần router
<Route path="/post/:id" element={<Post></Post>}></Route>
Tiếp theo phần trỏ link trong return của react
<Link to={"/post/" + props.post.id}>
<img src={link} alt={props.post.title} />
</Link>
Ở trong file post.tsx
import axios from "axios";
import React, { useState } from "react";
import { useParams } from "react-router";
import { Box, Page } from "zmp-ui";
const Post = () => {
const { id } = useParams();
const [post, setPost] = useState([]);
const get_post_urrl = () =>
axios.get("https://miniapp.xxxx.com/api/getpost/" + id[0].toString());
if (post.length < 1) {
const allpost = get_post_urrl().then((res) => {
setPost(res.data);
});
}
console.log(post);
return (
<>
<Page>
<Box m={3}>
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
</Box>
</Page>
</>
);
};
export default Post;
Còn phần show content trong react thì chỉ cần
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
Vậy là xong .React thật đơn giản phải không các bạn