reactjs - React JS routing producing 404 error -

i working react js routing meteor application. producing unusual (in eyes) 404 routing error when working nested route.

my routing structure follows(i have removed reference readability:

  <router history={browserhistory} onupdate={() => window.scrollto(0, 0)}>      <route path="/" component={app}>       <indexroute component={home} />        //dashboard       <route path="app" component={appdash}>          <indexroute component={dashboardsummary} />          <route path="inbox" component={app}>           <indexroute component={inbox} />           <route path="?query:query" component={app}/>           <route path=":id/confirm" component={book}/>           <route path=":id" component={conversation}/>         </route>        </route>     </route>    </router> 

now when navigate <route path=":id/confirm" component={book}/> using <link to={this.props.id + "/confirm"}>book option</link> within conversation page 404 error. if refresh on link brings correct page.

i'm not sure how debug this?

try modifying below,

<route path=":id/confirm" component={book}/>       <route path=":id" component={conversation}/> 

to

 <route path="confirm" component={book}>     <indexroute component={book}/>     <route path=":id" component={conversation}/>   </route>