Question

我目前正在使用 react 和 react-router ，并且正在构建一个页面，该页面显示某个特定项目的详细信息，当页面安装。提取方法需要项目的id，因此我使用match.params.id来获取提取方法的值。我还使用后端的 slug 包以URL格式在id旁边显示该项目的标题。我希望用户能够输入带有标题的URL，而不必担心键入id才能将其定向到具有正确数据的页面。

例如，单击UI上的项目将使URL看起来像这样：localhost:3000/the-title-slug/123456。您必须实际单击UI上的项目以获取具有ID的URL，但我想使用户更简单，并使其易于操作，以便如果他们仅输入子标题：localhost:3000/the-slug-title，它将重定向到带有该段名和ID的正确URL。

关于如何做到这一点的任何想法？就像您键入googel.com一样，它会纠正输入错误并引导您进入google.com。感谢您提供帮助，解决所有问题。

Answer 1

您的后端必须具有API方法，才能通过拼写错误的子句获取正确的项目。像：

requestData: the-slug-title
responseData: the-title-slug, 123456

然后您的组件必须处理错误的网址

componentDidMount() {
  const { params } = this.props.match;

  const respose = await fetch({ ... })

  this.setState({ id: response.id, slug: response.slug });
}

render() {
  const { params } = this.props.match;

  return this.state.id && this.state.slug && (this.state.id !== params.id || this.state.slug !== params.slug) && <Redirect to={`/${this.state.slug}/${this.state.id}`} />
}

反应URL参数重定向

1 个答案: