reactjs 如何将文本(查询)附加到react-router URL？

oipij1gg 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(134)

x1c 0d1x在附件中，很明显，问题是使用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获取详细信息
我不知道如何转换它以满足我的要求。
请帮助我实现这一点。谢谢

reactjs

来源：https://stackoverflow.com/questions/59520261/how-to-append-textquery-to-a-react-router-url

1条答案

按热度按时间

sqxo8psd1#

这里的想法是完全不依赖于用户提供文本，这可能是格式错误或丢失的字符在任何时候。相反，您可以填写从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在这里提供了两个优点：
1.该组件不被重新呈现，因为导致它的Route是同一个。
1.它使用replace而不是push，这意味着重定向不会成为用户历史堆栈的一部分。（用户无法按下“后退”并返回到没有文本的页面）

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 如何将文本(查询)附加到react-router URL？

1条答案

相关问题

热门标签

最新问答