React Flux - Pass props to react router

Question

I am using the React flux architecture as shown in this example from facebook. https://github.com/facebook/flux/tree/master/examples/flux-todomvc. I am also using react-router in my app. I am following the switch example https://reacttraining.com/react-router/web/example/modal-gallery as I need to render the same screen in a different context. So from the example if I click on a color I would load a screen in that color. The only difference is that I want to load the list of colors dynamically from an Api.

My container is as below

AppContainer.js

function getStores() {
    return [
        ColorStore
    ];
}

function getState() {
    return {
        colors: ColorStore.getState()
    };
}

export default Container.createFunctional(AppView, getStores, getState);

AppView.js

const AppView = (props) => {
    return (
        <Router>
            <Route component={RouteSwitch} {...props} />
        </Router>
    );
}

But I am unable to access custom props in the Route component. I only get history, location & match. How do I do this?

Answer 1

Pass the values like this:

<Route component={(props) => <RouteSwitch {...props} />} />