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

Question

我正在更新一个数据存储库站点，其中数据集映射到一个 id，这是我们 url 路径中使用的参数。最近有一些数据集被损坏，部分解决方案涉及更改它们的 ID。问题是，很多用户都链接到我们网站上的数据集——其中一些已经死了，因为前面提到的 id 已经改变了。

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

如果 www.example.com/rootpath/dataset/001 已死，现在是 www.example.com/rootpath/dataset/002，我如何从 www.example.com/rootpath/dataset/001 重定向用户和 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 组件中处理重定向：

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

2. 使用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.
   ...