React Router TransitionTo Missing Parameter

Question

I am trying to programmatically redirect using React-router. However, I am stuck with an issue.

routes

<Route handler={Home} path="/">
    <Route handler={Handler2} name="route-2" path="/route2" />
    <Route handler={Handler3} name="route-3" path="/route3/:param1" >

        <Route handler={Handler4} name="route-4" path="subroute/:param2" />
    </Route>
 </Route>

A component Deep in the hierarchy, child of handler

...
    contextTypes: {
        router: React.PropTypes.func
    },
    handleClick : function(e){
        this.context.router.transitionTo('route-4',{param1:1,param2:2});

    },
   ...

I am able to call the transitionTo function and also the right route, but I get the error saying,

Invariant Violation: Missing "param1" parameter for path "/route3/:param1/subroute/:param2"

Please help. Is this a syntax error?

knowbody knowbody · Accepted Answer · 2015-06-29T07:24:55

This might help you https://github.com/rackt/react-router/issues/1285#issuecomment-111908695

As Michael said you would need to:

In order to interpolate params in the 0.13.x API your path needs to have a segment for that param to occupy.

React Router TransitionTo Missing Parameter

1 Answers