React Router：使用特定参数重定向 URL

Question

我正在更新一个数据存储库站点，其中数据集映射到一个 id，这是我们 url 路径中使用的参数。一些数据集最近遭到破坏，部分解决方案涉及更改其 ID。问题是，很多用户链接到我们网站上的数据集 - 由于上述 ID 已更改，其中一些已经失效。

目前，我只是对大约 5 个已失效的 ID 进行快速客户端重定向。我只想将用户从 /datasets/oldID 重定向到 /datasets/newID，但我在文档中找不到任何关于字面上重定向到不同 url 的内容。是的，对其进行硬编码。

如果 www.example.com/rootpath/dataset/001 已死，现在是 www.example.com/rootpath/dataset/002，我如何从 www.example.[=23 重定向用户=] 和 www.example.com/rootpath/dataset/002?

这是数据集路由设置

const DatasetRoutes = ({ dataset }) => (
  <Switch>
    <Route
      name="dataset"
      exact
      path="/datasets/:datasetId"
      render={() => <DatasetContent dataset={dataset} />}
    />
    <Route
      name="download"
      exact
      path="/datasets/:datasetId/download"
      component={DownloadDataset}
    />
    <Route
      name="publish"
      exact
      path="/datasets/:datasetId/publish"
      component={() => (
        <Publish datasetId={dataset.id} metadata={dataset.metadata} />
      )}
    />
/*    ... 
 more routes etc
*/    ...
  </Switch>
)

我有点困惑，因为我无法弄清楚如何使用 React Router v4 做一些可能如此简单的事情。我已经尝试了几种方法...是否有直接的解决方案？

Answer 1

您可以在 DatasetContent 组件中处理重定向：

设置字典映射需要重定向到新 ID 的旧 ID。

使用 useParams 挂钩（或者您正在访问参数）并在 DatasetContent 组件中：

const map = {
    oldId: "newId"
};

let { datatsetId } = useParams();

if (map.hasOwnProperty(datasetId) {
    return (<Redirect to={`/datasets/${map[datasetId]}`});
}

// the rest of your original DatasetContent rendering code.
...

React Router：使用特定参数重定向 URL

React Router: Redirecting URLs with a specific param

reactjs

redirect

react-router

client-side