Configuring React Router SubRoutes with React-Semantic-UI CardGroups

Question

I have researched this for a while, and followed documentation from the following places:

This issue on github led me to the semantic-ui-react documentation on Augmentation,

and the react-router documentation on setting up route config with sub-routes.

My route configuration seems to work, but it is unclear where to specifically implement the component augmentation.

I have tried <Card.Group items={items} as={Link} to={items.map((item,i)=>(item.href))} />, as well as trying to put the as={Link} in the props itself, and have faced a bunch of errors and eventually recursive failure leading to the dreaded Maximum call stack size exceeded!

For now, I am just hard coding the paths to components with react-router. A functional approach would be more elegant, and much more react-y, and this is what I'm after!

Answer 1

You trying to apply augmentation to Card.Group, while in fact you want you want to apply it to Card.

So correct usage for the subcomponent API is:

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

Correct usage for the shorthand API is:

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

<Card.Group items={items} />