[Discussion] V4 <Match>

Hi!

disclaimer: this is not an issue but an idea that I want to bounce with you guys, so prioritize accordingly.

I’ve been looking at V4 and I love it. I been thinking for a while that the router could help flux / redux to be more decoupled from the rest of the app by allowing the Route Handlers to receive custom props. The old way of defining routes was a bit in the way for doing this but I think that <Match> is a great candidate.

I don’t think it’s a super big change, we basically need to have Match accept any props and just use the ones that belong to it’s API (pattern, exactly, location, component, etc) and send the rest to the Component that’s the Route Handler.

Why this is useful? Imagine that we have an app that’s basically a CRUD for puppies.

Suppose we have:

• <Match pattern={'/pup/:name'} component={Puppy} />: displays the Name and Image of the puppy.
• <Match pattern={'/pup/:name/edit'} component={EditPuppy} />: enables the user to edit that puppy. (Child route of the above)

And also suppose we are using Redux.

Now, how would you get the puppy’s data when you navigate to those routes? You would simply do mapStateToProps and get it from the app’s state (by using the :nameroute param)

Now the important part is that both components will be requesting the same data to the state but we are missing the chance to pass the puppy already calculated in <Puppy> to <EditPuppy` via props.

I think this feature will be really nice for big apps that use a lot of data all around. And the most important aspect is that we almost remove any limitations the Router can impose into app design.

Bonus: If we could achieve that with the router then I strongly believe that React + React-Router is suitable for small to medium size apps (without Redux or any state management lib) because we can basically have a top level Component that beholds the App State in it’s this.state attribute, and instead of actions we would have simple callbacks that in the end will call this.setState for that parent component.

Example:

class Puppy extends Component {
  render() {
    const { puppyName } = this.props.params;

    // You get this through Redux by mapping `puppyName` to a `puppy` object
    const { puppy } = this.props;

    return (
      <div>
        <h1>{puppy.name}</h1>
        <img src={puppy.img} />


        <Match pattern="/pup/:name/edit" component={EditPuppy} puppy={puppy}/>
      </div>
    );
  }
}


function EditPuppy({puppy}) {
  // The actual content of the EditPuppt is not important, but
  // you can assume that we need the puppy object to fill the initial state
  // of the form
  return <PuppyForm puppy={puppy} />
}

I hope my idea is understandable and that I did explain it ok, otherwise let me know and I will work on it.

Thanks a lot for your time Fran

[zwily]

@ryanflorence’s proxy is missing passing your match parameters to Match:

const ProxyPropsMatch = ({ component:Comp, ...proxied}) => (
  <Match {...proxied} render={(props) => <Comp {...proxied} {...props} /> } />
)

Or if you don’t want to shower the Match with all your unrelated props:

const ProxyPropsMatch = ({ component:Comp, pattern, exactly, location, ...proxied}) => (
  <Match {...{pattern, exactly, location}} render={(props) => <Comp {...proxied} {...props} /> } />
)

This illustrates to me why you don’t want Match to do this by default: risk of prop name collisions. A safer way would be something like:

const MatchWithProps = ({ component:Comp, passProps, ...props}) => (
  <Match {...props} render={(matchedProps) => <Comp {...passProps} {...matchedProps} /> } />
)

<MatchWithProps pattern="/foo" component={Foo} passProps={{ bar: 1 }} />

So much flexibility. 😄

[ryanflorence]

const ProxyPropsMatch = ({ component:Comp, ...proxied}) => (
  <Match render={(props) => <Comp {...proxied} {...props} /> } />
)