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

Question

在附件中，很明显问题是使用 URL 中的 ID 15777142 提取的，然后问题文本（作为查询）附加到 URL。 15777142后面的文字独立没有意义。我们可以使用 react-router-5 实现相同的效果吗？



我目前的处理方式：

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

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


它为我做 return 页面，但如果用户从 URL 中删除文本，它仍然 return 是同一页面，但不会在结尾。我正在 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 path="/answer/:id" component={Answer} />

Redirect 在这里提供两个优势：

组件不会重新呈现，因为通向它的 Route 是同一个组件。
它使用 replace 而不是 push 意味着重定向不会成为用户历史堆栈的一部分。（用户无法按返回键返回到没有文本的页面）

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

How to append text(query) to a react-router URL?

reactjs

react-router

react-router-v5