使用 React-Semantic-UI 卡组配置 React Router 子路由

Question

我对此进行了一段时间的研究，并遵循了以下位置的文档：

This issue on github led me to the 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} 放入 props 本身，但遇到了一堆错误，最终导致了可怕的 Maximum call stack size exceeded!

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

Answer 1

您试图将扩充应用于 Card.Group，而实际上您想要将其应用于 Card。

所以子组件 API 的正确用法是：

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

shorthand API 的正确用法是：

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

<Card.Group items={items} />

使用 React-Semantic-UI 卡组配置 React Router 子路由

Configuring React Router SubRoutes with React-Semantic-UI CardGroups

semantic-ui

react-router

semantic-ui-react