时间戳

首页 > 解决方案 > React Router 在能够刷新页面的同时传递不在 URL 中的道具

reactjs - React Router 在能够刷新页面的同时传递不在 URL 中的道具

问题描述

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

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

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

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

并使用props.match.params. 现在，我有这个：

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

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

我想这是一个常见问题，但无法找到令人满意的答案，因为我需要两件事：1）网址中的城市名称 2）应用程序部分需要它的城市 ID，没有它通过 URL 传入

标签： reactjsreact-router

解决方案

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

您可以按照评论中的建议使用本地存储来保持名称和 ID 之间的映射，但它的解决方案非常棘手 - 想象一下将您的 url 发送给其他人 - 他的本地存储中没有任何内容，并且在打开该页面时出现错误。

您最好的选择是更新您的后端（如果您可以控制后端）以启用按名称获取（因为它们应该是唯一的，对吗？）。然后，一旦用户/:city/personalize使用来自params.

推荐阅读