在React+Node应用中如何获取单条帖子URL作为字符串供react-share使用

1. 先纠正传参写法误区 #

你看到的示例中url="string-url"是写死字符串的传参方式，React中要传动态变量只需要用花括号{}包裹变量即可，不需要把URL转成写死的字符串，不存在无法传入url变量的问题。

2. 不同场景下的帖子URL获取方式 #

场景1：当前处于单条帖子详情页 #

直接用window.location.href获取当前页面地址即可，完整示例代码：

import { FacebookShareButton, FacebookIcon } from 'react-share';

function PostDetail() {
  // 直接获取当前详情页的完整URL
  const postUrl = window.location.href;

  return (
    <div>
      <FacebookShareButton url={postUrl}>
        <FacebookIcon lightingColor="white" round={true} />
      </FacebookShareButton>
    </div>
  )
}

场景2：当前处于帖子列表页（每条列表项带分享按钮） #

不能直接用当前列表页的URL，需要用帖子唯一ID拼接出单条帖子的完整访问地址，示例代码：

import { FacebookShareButton, FacebookIcon } from 'react-share';

// postList为从接口获取的帖子列表数据，每条数据包含唯一id字段
function PostList({ postList }) {
  return (
    <div>
      {postList.map(post => {
        // 按你的站点路由规则拼接单条帖子的完整URL
        const postUrl = `${window.location.origin}/posts/${post.id}`;
        return (
          <div key={post.id}>
            <h3>{post.title}</h3>
            <FacebookShareButton url={postUrl}>
              <FacebookIcon lightingColor="white" round={true} />
            </FacebookShareButton>
          </div>
        )
      })}
    </div>
  )
}

注意事项 #

• 如果使用哈希路由（URL带#前缀），拼接路径时需要补充#，例如：${window.location.origin}/#/posts/${post.id}
• 如果站点部署在域名子路径下，需要补充子路径前缀，例如站点部署在https://your-domain.com/blog下，拼接规则为：${window.location.origin}/blog/posts/${post.id}

内容的提问来源于stack exchange，提问作者kinhs