react-router - 使用 React-Semantic-UI CardGroups 配置 React Router SubRoutes

Question

我已经研究了一段时间，并遵循了以下地方的文档:

This issue on github带我到 semantic-ui-react documentation on Augmentation ,

以及 setting up route config with sub-routes 上的 react-router 文档.

我的路由配置似乎有效，但不清楚在哪里具体实现组件增强。

我试过 <Card.Group items={items} as={Link} to={items.map((item,i)=>(item.href))} /> ，以及试图把 as={Link}在 Prop 本身中，并面临着一堆错误，最终导致可怕的 Maximum call stack size exceeded! 递归失败

现在，我只是用 react-router 硬编码组件的路径。函数式方法会更优雅，更容易 react ，这就是我所追求的!

Answer 1

您尝试将增强应用于 Card.Group ，而实际上您希望将其应用于 Card .

因此子组件 API 的正确用法是:

<Card.Group>
  <Card as={Link} to='/foo' />
  <Card as={Link} to='/bar' />
</Card.Group>

速记 API 的正确用法是:

const items = [
  { as: Link, content: 'Foo', to: '/foo' }, 
  { as: Link, content: 'Bar', to: '/bar' },
]

<Card.Group items={items} />