Pass extra props from Match to Component (v4)

[wvl]

Trying to use v4, and one of the first things I assumed would work was to pass props through the component. For example, a trivial example:

const Home = ( { msg } ) => (
  <div>
    <h2>Home { msg }</h2>
  </div>
)

const BasicExample = () => (
  <div>
    <Match exactly pattern="/" component={Home} msg={"hello"} />
    <Match pattern="/about" component={Home} msg={"about"} />
  </div>
)

This is a tiny patch to Match that makes that work. Am I missing something as to why that isn't the current behavior, or can this be merged? Thanks!

diff --git a/modules/Match.js b/modules/Match.js
index db5a0b3..ff7f2ff 100644
--- a/modules/Match.js
+++ b/modules/Match.js
@@ -83,10 +83,10 @@ class Match extends React.Component {
   }

   render() {
-    const { children, render, component:Component, pattern } = this.props
+    const { children, render, component:Component, pattern, ...rest } = this.props
     const { match } = this.state
     const { location } = this.context.router.getState()
-    const props = { ...match, location, pattern }
+    const props = { ...rest, ...match, location, pattern }
     return (
       children ? (
         children({ matched: !!match, ...props })

[pshrmn]

Inline components using render are included with this in mind.

<Match exactly pattern="/" render={(props) => <Home msg={"hello"} {...props} />} />

[wvl]

Ah, thanks, that would work. Still, I'll leave this open for consideration for adding to the api -- is the extra functional composition simpler than mixing the props from the component into the route?

[pshrmn]

For adding extra functionality, it is typically recommended that you create your own <Match> wrapper like the <MatchWhenAuthorized> component used in the auth workflow example.

function MatchWithProps({ props, component:Component, ...rest} {
  return <Match {...rest} render={(matchProps) => (
    <Component {...matchProps} {...props} />
  )} />
}

<MatchWithProps exactly pattern='/' component={Hello} props={{ msg: 'hello' }} />