{"action":"created","issue":{"url":"https://api.github.com/repos/ReactTraining/react-router/issues/4229","repository_url":"https://api.github.com/repos/ReactTraining/react-router","labels_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4229/labels{/name}","comments_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4229/comments","events_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4229/events","html_url":"https://github.com/ReactTraining/react-router/issues/4229","id":192527398,"number":4229,"title":"v4: Match render a special case of Match component","user":{"login":"alexisvincent","id":1898669,"avatar_url":"https://avatars.githubusercontent.com/u/1898669?v=3","gravatar_id":"","url":"https://api.github.com/users/alexisvincent","html_url":"https://github.com/alexisvincent","followers_url":"https://api.github.com/users/alexisvincent/followers","following_url":"https://api.github.com/users/alexisvincent/following{/other_user}","gists_url":"https://api.github.com/users/alexisvincent/gists{/gist_id}","starred_url":"https://api.github.com/users/alexisvincent/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexisvincent/subscriptions","organizations_url":"https://api.github.com/users/alexisvincent/orgs","repos_url":"https://api.github.com/users/alexisvincent/repos","events_url":"https://api.github.com/users/alexisvincent/events{/privacy}","received_events_url":"https://api.github.com/users/alexisvincent/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-11-30T10:22:01Z","updated_at":"2016-11-30T19:51:13Z","closed_at":"2016-11-30T17:28:13Z","body":"# render a special case of component\r\nIn RR4, the Match component has a prop called render, with the following spec.\r\n\r\n> render: func\r\nInstead of having a component rendered for you, you can pass in a function to be called when the location matches. Your render function will be called with the same props that are passed to the component.\r\nThis allows for convenient inline match rendering and wrapping.\r\n\r\n```javascript\r\n// convenient inline rendering\r\n<Match pattern=\"/home\" render={() => <div>Home</div>}/>\r\n\r\n// wrapping/composing\r\nconst MatchWithFade = ({ component:Component, ...rest }) => (\r\n  <Match {...rest} render={(matchProps) => (\r\n    <FadeIn>\r\n      <Component {...matchProps}/>\r\n    </FadeIn>\r\n  )}/>\r\n)\r\n\r\n<MatchWithFade pattern=\"/cool\" component={Something}/>\r\n```\r\n\r\nHowever, since, `({ component:Component, ...rest }) => (...)` (as in the example), is a valid react component, this prop is simply a special case of the component prop, and the example, copy and pasted with just `render` changed to `component` would be valid, as shown below:\r\n\r\n```javascript\r\n// convenient inline rendering\r\n<Match pattern=\"/home\" component={() => <div>Home</div>}/>\r\n\r\n// wrapping/composing\r\nconst MatchWithFade = ({ component:Component, ...rest }) => (\r\n  <Match {...rest} component={(matchProps) => (\r\n    <FadeIn>\r\n      <Component {...matchProps}/>\r\n    </FadeIn>\r\n  )}/>\r\n)\r\n\r\n<MatchWithFade pattern=\"/cool\" component={Something}/>\r\n```\r\n\r\nIMO, having an extra prop, which is really just a special case of another one, is unnecessary API bloat, that will lead to confusion. \r\n\r\nWhat is the motivation for including `render`? And is there perhaps something I'm missing here?"},"comment":{"url":"https://api.github.com/repos/ReactTraining/react-router/issues/comments/263976152","html_url":"https://github.com/ReactTraining/react-router/issues/4229#issuecomment-263976152","issue_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4229","id":263976152,"user":{"login":"alexisvincent","id":1898669,"avatar_url":"https://avatars.githubusercontent.com/u/1898669?v=3","gravatar_id":"","url":"https://api.github.com/users/alexisvincent","html_url":"https://github.com/alexisvincent","followers_url":"https://api.github.com/users/alexisvincent/followers","following_url":"https://api.github.com/users/alexisvincent/following{/other_user}","gists_url":"https://api.github.com/users/alexisvincent/gists{/gist_id}","starred_url":"https://api.github.com/users/alexisvincent/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexisvincent/subscriptions","organizations_url":"https://api.github.com/users/alexisvincent/orgs","repos_url":"https://api.github.com/users/alexisvincent/repos","events_url":"https://api.github.com/users/alexisvincent/events{/privacy}","received_events_url":"https://api.github.com/users/alexisvincent/received_events","type":"User","site_admin":false},"created_at":"2016-11-30T19:51:13Z","updated_at":"2016-11-30T19:51:13Z","body":"@timdorr Have you considered dropping `component` in favor of `render`. This solves the readability issue. Since `render={Foo}`, sounds good, also follows the functional convention of using verbs over nouns. This also makes the API surface area smaller and easier to understand."}}
{"actor":{"display_login":"alexisvincent"}}