能够刷新页面的React Router通过道具不在URL中

Question

在我的应用中，我有一长串城市，每个城市都有一个对应的ID。以前，我使用的是这样的url参数：

<Route exact path="/:cityid" component={SearchPage} />

但是，现在我想在URL中使用城市名称本身，以使其为 / vancouver ，而不是 / ab6e0d97 。我可以使它正常工作，但是当我想在以下页面之一中使用cityid时，就会出现问题。以前，我是这样传递城市居民的：

  props.history.push({
      pathname: `/${cityid}/personalize`
  })

，然后使用props.match.params访问它。现在，我有了这个：

    props.history.push({
      pathname: `/${city}/personalize`,
      state: { cityId }
    })

从/:city/personalize，我可以通过props.location访问cityId。但是，刷新时，我丢失了props.location，并且定义了cityId。我需要这个cityId才能发出获取请求，以获取与cityId相关联的所有项目。

我认为这是一个常见问题，但是由于我需要两件事，因此无法找到令人满意的答案： 1）网址中的城市名称 2）在应用中需要它的部分中的cityid，而无需通过URL传入

Answer 1

在这种情况下，我认为您无能为力，因为只有在最初进入页面时才拥有的数据才是url中的信息（以您的城市名称为准）。

您可以按照注释中的建议使用本地存储来保持名称和ID之间的映射，但是它的解决方案非常笨拙-设想向其他人发送您的url-他在本地存储中没有任何内容，并且在打开该页面时出错。

您最好的选择是更新您的后端（如果您可以控制后端）以启用按名称提取（因为它们应该是唯一的，对吧？）。然后，一旦用户使用/:city/personalize中的城市名称输入了特定的params，您就可以轻松进行抓取。