reactjs - How to prevent both routes from being matched in react-router v4? -

if path /posts/new, both components postsnew , postsshow below rendered, , :id matched, id being word new instead of number:

reactdom.render(   (     <provider store={createstorewithmiddleware(reducers)}>       <router>         <app>           <route exact={true} path="/" component={postsindex} />           <route path="/posts/new" component={postsnew} />           <route path="/posts/:id" component={postsshow} />         </app>       </router>     </provider>   ),   document.queryselector('#root') ); 

in app.js:

  <div>     <h1>an awesome app</h1>       {this.props.children}   </div> 

how can /posts/new not matched twice?

we call "ambiguous routes" , there's example on our site here.

the switch component should solve this.

reactdom.render(   (     <provider store={createstorewithmiddleware(reducers)}>       <router>         <app>           <switch>             <route exact={true} path="/" component={postsindex} />             <route path="/posts/new" component={postsnew} />             <route path="/posts/:id" component={postsshow} />           </switch>         </app>       </router>     </provider>   ),   document.queryselector('#root') );