reactjs - 如何在 Reactjs 中将文章标题添加到 URL 中？

Question

我想知道是否可以在重定向到特定文章后将文章标题添加到 URL 中？

一个例子:

https://www.analyticsinsight.net/top-50-programming-languages-learn-coding/

所以我将 reactjs 与 nodejs 和 MySQL 一起使用。

我有一个包含列、post_Text、post_Title 等的表格

我只需要在用户点击特定文章的标题后将文章标题添加到URL。

我有一个路由器如下。

   <Route path="/post/:id" exact>
          <Post />
  </Route>

在 post.js 文件中，我有一个简单的 get 方法。

axios.get(`${server}/posts/byId/${id}`).then((res) => {
  setPosts(res.data);
});

我会很感激你的帮助:_)

Answer 1

一个很好的问题。我也这样问自己。这是我的做法。

1. 我设置了路线，就像您所做的一样，但第二条路线具有另一个深度级别和最后一个参数。

    <Route path="/post/:id" exact><Post /></Route>     
    <Route path="/post/:id/:post_title" exact><Post /></Route>

1. 在导航到帖子的点击处理程序上，我这样做了。这里传递的值。正则表达式只是识别空格，以便可以用 string.replace 方法替换它们。

    const handleReadPost = (post_id, post_title) => {
    const urlRegex = /\s/g;
    const url_title = post_title.toLowerCase().replace(urlRegex, '-');

    navigate(`/posts/${post_id}/${url_title}`);
    };

在我的例子中，它就起作用了。我不需要对 Post 组件中的 Axios GET 或逻辑进行任何调整。