反应 URL 参数重定向答案

【问题标题】：React URL param redirect反应 URL 参数重定向
【发布时间】：2020-09-09 07:10:48
【问题描述】：

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

例如，单击 UI 上的项目将使 URL 看起来像这样：localhost:3000/the-title-slug/123456。您必须实际单击 UI 上的项目以获取具有 id 的 URL，但我想让用户的事情变得更简单，并使其如果他们只输入 slug 标题：localhost:3000/the-slug-title，它将重定向到带有该 slug 和 id 的正确 URL。

关于如何做到这一点的任何想法？有点像如果您输入googel.com，它会更正拼写错误并将您定向到google.com。任何解决此问题的帮助将不胜感激，谢谢。

【问题讨论】：

标签： reactjs url react-router url-parameters

【解决方案1】：

您的后端必须具有通过拼写错误的 slug 获取正确项目的 API 方法。喜欢：

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

然后你的组件必须处理错误的 url

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}`} />
}

【讨论】：