如何使用反应路由器 dom 将目录组件替换为详细项目组件

Question

我有一个主组件，用于使用路由在主组件之间切换。

const Main = () => {
  return (
    <Switch>
      <Route path="/" exact component={Landing} />
      <Route
        path="/catalog/:category/:type?/:typeOption?"
        component={Catalog}
      />
      <Route path="???" component={DetailedView} />
      />
    </Switch>
  );
};

目录组件基本上是商店中可用项目的列表。当用户单击其中一个项目时，我想将目录组件替换为显示该项目及其所有详细信息的组件。当我在详细页面上时，url应该是我所在的类别，并附加项目的名称。

例如 - 我可能在/catalog/mens/shirts/brown

上，当我点击一个项目时，我会被发送到 -/catalog/mens/shirts/brown/nameOfShirt。我可以通过匹配道具获取要将用户发送到的 url，但是我应该为我的 DetailedView 组件的路径放置什么？

Answer 1

您似乎正在寻找嵌套路由

在主组件内部，交换机将仅提供登陆和目录视图。

<Switch>
  <Route path="/" exact component={Landing} />
  <Route
    path="/catalog/:category/:type?/:typeOption?"
    component={Catalog}
  />
</Switch>

现在，在

目录视图中，您可以使用以下内容嵌套详细信息：

function Catalog({ match }) {
  return (
    <div>
      <Route
        path={match.path + '/:nameOfProduct'}
        component={DetailedView}
      />
      <Route
        exact
        path={match.path}
        render={() => <h3>Render the list of items here</h3>}
      />
    </div>
  )
}

这样，URL 将被修改为附加到前面的内容。

要处理可选参数，您必须以某种方式区分 type 和product的 ID。例如。如果我限制所有产品 ID 都以 pr 开头，那将是：

<Switch>
  <Route path={`${match.path}/:id(pr.*)`} render={() => <p>Product</p>} />
  <Route path={match.path} render={() => <p>Still Catalogue</p>} />
</Switch>

如果您无法使用正则表达式模式区分它们，则必须在 URL 中添加一个路由参数，使其：

/catalog/mens/shirts/product/nameOfShirt /catalog/mens/shirts/type/product/nameOfShirt

这样，您就可以在 Switch 语句中将Route添加到用于catalog的上方