如何将文本（查询）附加到反应路由器 URL？

Question

在附件中，很明显问题是使用 id 15777142 从 URL https://stackoverflow.com/questions/15777142/why-we-should-have-an-id-column-in-the-table-of-users 获取的，然后将问题文本（作为查询）附加到 URL。 15777142后面的文字没有独立意义。
我们可以使用 react-router-5 达到同样的效果吗？

我现在的处理方式：

<Route path="/questions/:id/:title" component={Question}/>

<Link to="/questions/15777142/my-xyz-text">Go to question</Link>

它确实会为我返回页面，但如果用户从 URL 中删除文本，它仍然会返回相同的页面，但不会在末尾附加文本。我在componentDidMount() 上使用:id 获取详细信息

我不知道如何转换它以满足我的要求。

请帮助我实现这一目标。谢谢

Answer 1

这里的想法是根本不依赖用户提供文本，这可能随时出现格式错误或丢失字符。相反，您可以填写从 API 或任何其他来源收到的文本。

这可以简单地做到：

export default ({ match }) => {
  const [item, setItem] = useState(null);
  useEffect(() => {
    const id = match.params.id;
    const item = data.find(item => item.id === id);
    setItem(item);
  }, []);
  if(!item) {
    return null;
  }
  return (
    <section>
      <Redirect to={`/answer/${item.id}/${item.text}`} />
      <p>Answer</p>
    </section>
  )
}

Route 被定义为：

<Route path="/answer/:id" component={Answer} />

Redirect 在这里提供了两个优势：

1. 组件不会重新渲染，因为指向它的Route 是相同的。
2. 它使用replace 而不是push，这意味着重定向不会成为用户历史堆栈的一部分。 （用户不能按返回并返回没有文字的页面）