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!

Oleksandr Fediashov · Accepted Answer · 2017-08-02 10:00:48Z

11

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} />

answered Aug 2, 2017 at 10:00

Oleksandr Fediashov

4,3351 gold badge26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user990993 Over a year ago

is there a way to define set up 'active' link?

Vlady Veselinov Over a year ago

@user990993 import { NavLink } from 'react-router-dom' like this?

user990993 Over a year ago

@VladyVeselinov, yes that's it

Collectives™ on Stack Overflow

Configuring React Router SubRoutes with React-Semantic-UI CardGroups

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related