RFC: Link as both Component and Function as Child Component #3874
Description
First of all, thanks for this great new version!
Link is a great component that provides a simple way to create a link.
Unfortunately, I need to render a custom component instead of that link, and that means I have to deal with context and other stuff that may be RR implementation-specific. You have also to check if the route is active by doing other code. So why not let the Link component pass them to you, using Function as Children?
Whis will play nicely with libraries like material-ui from calleemall where the Tab header is a custom component, and not a link. So dealing with it would require a custom component and dealing with context stuff.
Version
4.0.0
Expected Behavior
Patch this lines of code:
https://github.com/ReactTraining/react-router/blob/1be1ed7370651f247e589a8499d360d2b1db3b26/modules/Link.js#L88-L97
If children is a function, than children will be called passing an object with the following keys:
isActive already defined by
https://github.com/ReactTraining/react-router/blob/1be1ed7370651f247e589a8499d360d2b1db3b26/modules/Link.js#L78-L82
onClick already defined by
https://github.com/ReactTraining/react-router/blob/1be1ed7370651f247e589a8499d360d2b1db3b26/modules/Link.js#L92
transition (or any better name) this will be a function that takes optionally the event parameter.
If event is present, preventDefault() will be called when this function is called.
If event is not present transitionTo with the "to" prop setted in the Link component will be called when this function is called.
<Link to="/users/add">{
({isActive, onClick}) => <FlatButton onClick={onClick} primary={isActive}>Add User</FlatButton>
}</Link>you will also able to define easily a Link wrapper.
// define the react-router wrapper
const FlatButtonLink = ({to, location, ...props}) => <Link to={to} location={location}>{
({isActive, transition}) => <FlatButton {...props} onClick={onClick} primary={isActive} />
}</Link>
// later in your code
<FlatButtonLink to="/users/add" />Actual Behavior
You need to deal with context API to call transitionTo and determine if the current link is active.