Blueprint: Tabs and react-router v4

[sunabozu]

I'm trying to make Tabs and Router v4 work together. I used your example, but replaced the Route component with Match. When I try to switch to other tab, the onChange event fires, but nothing else happens, the tabs don't switch and the location doesn't change.

Is there currently a way to make it work?

[nerdstep]

With React Router v4 since everything is a component, as far as I can tell, the only way to initiate a transition is by using either the <Link> component or the <Redirect> component, which makes things a bit of challenge.

I'm using also React Router v4 but with the Tree component. My solution feels a little hacked together, but I was able to get things working by setting a value in the component state when a node is clicked and then in the render method, if the value is defined, I set the value back to undefined (so the component will render after redirect) and then render a <Redirect> component to the new route.

The only other way I could see this working with RR's components, would be to have a callback in the Tree component to allow custom rendering of the node, that way you could render the <Link> component instead.

With Tabs, can you render the <Link> component inside of the <Tab>?

[adidahiya]

@nerdstep yes, I've seen react-router's <Link> used inside a <Tab>; it just requires some CSS overrides to look nice. Some what relevant: https://github.com/palantir/blueprint/issues/185

@giladgray is working on a Tabs API overhaul that ought to handle this. Since this keeps coming up, can you post your current proposal as an issue we can link to @giladgray?

[giladgray]

https://github.com/palantir/blueprint/issues/363#issuecomment-270200926 describes the proposed component structure.