javascript - 基于异步获取数据的 React 路由器条件重定向 url

Question

我下面有一个代码和框，显示了我的情况:

https://codesandbox.io/embed/sad-nash-x4n69

我有一个名为dataset的对象，它可以有零个、一个或多个版本。如果dataset有任何版本，该组件应显示最新版本或显示默认的空页面。由于这两个条件，组件有两个路由:/dataset 和 /dataset/:version:

如果数据集为空，我需要到 /dataset/overview 的 url 路由，它应该是数据集的基本信息。

如果数据集不为空，我需要将路由重定向到 /dataset/${dataset.versions} ，这将显示最新版本数据。

同时，DatasetView 组件具有三个选项卡:overview versions settings。我希望页面会自动重定向到 /dataset/overview 或 /dataset/:version/overview 取决于 dataset.versions。

但是我下面的代码有一个错误:当数据集没有版本时，路由将更改为 /dataset/overview/overview 而不是 /dataset/overview。希望有人能帮我解决这个问题。

Answer 1

虽然 @dev_junwen 的解决方案可能有效，但我想提供一个更简单的解决方案，并调查您的原始路由器无法工作的原因。

在您的代码中，路由器有一个可以省略的参数version。由于您没有将参数指定为可选，因此应用程序始终期望 dataset 之后的 slug 为 version 并附加另一个 /overview，即使不需要。

通过在路由器级别将其设置为可选，应用程序应该可以运行。

  <Route path={["/dataset/:version([0-9]+)?", "/dataset"]}>

为了使 DatassetComponent 组件内的现有路由正常工作，我在 version 参数中添加了一个正则表达式，以便它仅匹配数字。

在此处查看工作代码沙箱:https://codesandbox.io/s/epic-beaver-c14kk