transitioning routes with additional props on components with react router 4

Question

In React Router 4, one can easily append additional props to a component being passed to <Match/> by using render instead of component.

<Match pattern="/someroute" render={ () => (
    <SomeComponent { ...additionalProps } />
) } />

On the other hand, one can also transition between <Match/> routes by wrapping in a transitioning match wrapper component.

Referencing the wrapper:

<TransitionMatch pattern="/someroute" component={ RouteComponent } />

TransitionMatch wrapper:

import React, { Component } from "react";
import { Match } from "react-router";
import { TransitionMotion, spring, presets } from "react-motion";

const TransitionMatch = ({ component: Component, ...matchProps }) => {
    const willLeave = () => ({
        zIndex: 100,
        opacity: spring(0, { stiffness: 300, damping: 30, precision: 1 })
    });

    return (
        <Match { ...matchProps } children={ ({ matched, ...props }) => (
            <TransitionMotion
                willLeave={ willLeave }
                styles={ matched ? [ {
                    key: props.location.pathname,
                    style: {
                        opacity: 1
                    },
                    data: props
                } ] : [] } >
                { interpolatedStyles => (
                    <div>
                        { interpolatedStyles.map(config => (
                            <div key={config.key} style={{
                                ...config.style,
                                position: "absolute",
                                top: 0,
                                left: 0,
                                bottom: 0,
                                right: 0
                            }} >
                                <Component { ...config.data } />
                            </div>
                        )) }
                    </div>
                )}
            </TransitionMotion>
        ) } />
    );
};

export default TransitionMatch;

The problem is, how can one apply these two concepts together?

How can I efficiently wrap a <Match /> in a TransitionMatch component and pass additional props to it? Can I pass an element via the render prop instead of passing a component via the component prop of the TransitionMatch so I can add props to it? If so, how would I implement TransitionMatch?

Jerome Indefenzo · Answer 1 · 2016-10-27T05:02:14.017

Nevermind, I found the solution by myself. I simply just had to pass an additional prop to <TransitionMatch /> then spread it on the component itself on the TransitionMatch definition.

Referencing TransitionMatch:

let mainProps = {
    someMethod: this.someMethod,
    someState: this.state.someState
};

...

<TransitionMatch pattern="/someroute" component={ SomeComponent } compProps={ mainProps } />
<TransitionMatch pattern="/someotherroute" component={ SomeOtherComponent } compProps={ mainProps } />

TransitionMatch definition:

import React, { Component } from "react";
import { Match } from "react-router";
import { TransitionMotion, spring } from "react-motion";

const FadeMatch = ({ component: Component, compProps, ...matchProps }) => (
        <Match { ...matchProps } children={ ({ matched, ...props }) => {
            const motionProps = {
                willLeave: () => ({
                    zIndex: 100,
                    opacity: spring(0, { stiffness: 300, damping: 30, precision: 1 })
                }),
                styles: ( matched ? [ {
                    key: props.location.pathname,
                    style: {
                        opacity: 1
                    },
                    data: props
                } ] : [] )
            };

            return (
                <TransitionMotion { ...motionProps }>
                    { interpolatedStyles => (
                        <div>
                            { interpolatedStyles.map(config => (
                                <div key={config.key} style={{
                                    ...config.style,
                                    position: "absolute",
                                    top: 0,
                                    left: 0,
                                    bottom: 0,
                                    right: 0
                                }} >
                                    <Component { ...config.data } { ...compProps } />
                                </div>
                            )) }
                        </div>
                    ) }
                </TransitionMotion>
            );
        } } />
);

export default FadeMatch;

transitioning routes with additional props on components with react router 4

1 Answers1