javascript - 如何使用 react 路由器通过永久链接引用数据

Question

假设您有评论，并且您想通过 anchor 文本引用评论，例如这样的事情。
这是对帖子的评论的永久链接，表明了目标。
https://stackoverflow.com/a/31079244/7174241

您将如何为评论列表中的每条评论设置永久链接，以便您可以通过永久链接引用任何评论？
不确定这是否可以在前端完成，或者这更像是一个 orm 数据库的事情，根据表结构设置唯一的永久链接会更理想。
因此，例如，您有一个像这样的评论列表组件
评论列表.js

<Fragment>
  {/* filter based on first comment  */}
  {filterComments.map((comment, i) => (
    <div key={i} ref={ref} className="comment">
      <CommentItem comment={comment} />
    </div>
  ))}
</Fragment>;

CommentItem.js

<Fragment>

  <div id="permalink id goes here ?">
    <Link to="/393829fjf"> </Link> ?? // should a link go here
    <p>{comment.body}</p>
  </div>
</Fragment>;

类似的问题，但没有有用的解决方案。
Div anchor tag in a react component

Answer 1

Stackoverflow 是如何做到的
做一个快速curl -v https://stackoverflow.com/a/31079244/7174241在我的命令行中显示 StackOverflow 正在使用后端来查找答案，生成链接，然后将浏览器重定向到该链接:

> GET /a/31079244/7174241 HTTP/2
> Host: stackoverflow.com
> User-Agent: curl/7.64.1
> Accept: */*
> 
< HTTP/2 302 
< cache-control: private
< location: /questions/31079081/programmatically-navigate-using-react-router/31079244#31079244

这怎么能转化为前端
好吧，如果我们有一个 API 可以用来获取有问题的“答案”，那么我们可以使用 generatePath() 构建路径字符串。 .
假设我们的永久链接是 mysite.com/a/{answerId}我们的答案链接是 mysite.com/questions/{questionId}接下来，我们需要创建一个顶级路由条目:

<Route path="/questions/{questionId}" component={SomeQuestionPage} />
<Route path="/a/{answerId}" component={SomeAnswerRedirectPage} />

SomeAnswerRedirectPage内部我们希望调用后端来获取答案(可能还应该包含它所属的问题 ID)
然后，我们可以使用 <Redirect /> 进行重定向/ useHistory和 generatePath :

function SomeAnswerRedirectPage() {
  const history = useHistory();
  const { answerId } = useParams();

  useEffect(() => {
    someApiCall.getAnswerData(answerId)
      .then(response => {
        const { questionId } = response.data.answer;
        const path = generatePath('/questions/{questionId}', {
          questionId
        });

        history.push(`${path}#${answerId}`);
          
      })
  }, []);

  return null;
}

最后，在我们的 SomeQuestionPage确保我们在要滚动到的答案周围有一个 anchor 标记

function SomeQuestionPage() {
  return (
    <div>
      {question.title}
      <div>
        {question.answers.map(answer => (
          <a href={`#${answer.id}`} key={answer.id}>
            <SomeAnswerDisplay answer={answer} />
          </a>
        ))}
      </div>
    </div>
  );
}