为每篇博文创建唯一的路由 React

Question

我正在使用 React 开发一个博客网站，它结合了 CMS 的使用，在本例中为 Contentful。

所有博客文章都写入/保存在 CMS 上。我目前能够将所有博客帖子填充到我的网站上，但它显示为一个连续页面，其中帖子之间没有分隔。为避免这种情况，我计划为每篇博客文章创建一个唯一链接，并在主博客页面上列出所有文章（如下示例），并能够单击所需的文章，将您带到一个专门的页面只发给那一篇文章。

有没有办法为我从 CMS 检索的每个帖子动态创建唯一链接。

主博客页面

1. 博文#1
2. 博文#2
3. 博文#3

为这些文章中的每一篇创建一个唯一的链接，这样 url 就是这样的方式：“testsite.com/blog/blogpost1”

无法在此处找到类似的问题，但可能是因为我没有搜索正确的术语。感谢您的帮助！

更新

const BlogPostList = ({ article }) => {

const { titleheadings, body } = article.fields
const title = titleheadings.replace(/\s+/g, '')

const postBody = marked(body)

return (
    <Router>
        <li>
            <Link to={"/" + title}>{titleheadings}</Link>
        </li>
        <Route path={"/:id"}>
            <Child title={titleheadings} body={postBody} />
        </Route>
    </Router >
)}

function Child(props) {

let id = useParams()
console.log(id)

return (
    <div>
        <Row className="justify-content-center">
            <Col className="py-3" md="11">
                <Card>
                    <Card.Body>
                        <Card.Title>{props.title}</Card.Title>
                        <Card.Text align="justify" dangerouslySetInnerHTML={{ __html: props.body }} />
                    </Card.Body>
                </Card>
            </Col>
        </Row>
    </div>
);
}

export default BlogPostList;

Answer 1

这里有内容的 DevRel。 ?

您正在寻找的是用于 React 的路由器。路由器允许你们两个在应用程序内部定义 URL 和路由。

很多人所做的就是拥有一个以 slug 字段作为参数的动态路由。对于react-router，可能如下所示：

<Route path="/:slug">
  <Page />
</Route>

然后在您的Page 组件中，您将读出slug URL 参数并获取您感兴趣的内容条目。