React difference between Route exact path and Route path

Question

Can someone explain the difference between  lt Route exact path  quot   quot  component  Home    gt   and  lt Route path  quot   quot  component  Home    gt   I don t know the meaning of  exact

User · Answer

Take a look here  https   reacttraining com react-router core api Route exact-bool exact  bool When true  will only match if the path matches the location pathname exactly    path        location pathname       exact       matches      one         one two                true        no  one         one two                false       yes

User · Answer

The shortest answer is Please try this    lt switch gt      lt Route exact path  quot   quot  component  Home    gt      lt Route path  quot  about quot  component  About    gt      lt Route path  quot  shop quot  component  Shop    gt    lt  switch gt

User · Answer

Please try this          lt Router gt             lt div gt               lt Route exact path  quot   quot  component  Home    gt               lt Route path  quot  news quot  component  NewsFeed    gt             lt  div gt           lt  Router gt

User · Answer

In short  if you have multiple routes defined for your app s routing  enclosed with Switch component like this    lt Switch gt      lt Route exact path     component  Home    gt     lt Route path   detail  component  Detail    gt      lt Route exact path   functions  component  Functions    gt     lt Route path   functions  functionName  component  FunctionDetails    gt    lt  Switch gt    Then you have to put exact keyword to the Route which it s path is also included by another Route s path  For example home path   is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with    The reason is also similar to  functions path  If you want to use another route path like  functions-detail or  functions open-door which includes  functions in it then you need to use exact for the  functions route

User · Answer

In this example  nothing really  The exact param comes into play when you have multiple paths that have similar names   For example  imagine we had a Users component that displayed a list of users  We also have a CreateUser component that is used to create users  The url for CreateUsers should be nested under Users  So our setup could look something like this    lt Switch gt     lt Route path   users  component  Users    gt     lt Route path   users create  component  CreateUser    gt   lt  Switch gt    Now the problem here  when we go to http   app com users the router will go through all of our defined routes and return the FIRST match it finds  So in this case  it would find the Users route first and then return it  All good   But  if we went to http   app com users create  it would again go through all of our defined routes and return the FIRST match it finds  React router does partial matching  so  users partially matches  users create  so it would incorrectly return the Users route again   The exact param disables the partial matching for a route and makes sure that it only returns the route if the path is an EXACT match to the current url   So in this case  we should add exact to our Users route so that it will only match on  users    lt Switch gt     lt Route exact path   users  component  Users    gt     lt Route path   users create  component  CreateUser    gt   lt  Switch gt    The docs explain exact in detail and give other examples

[reactjs] React : difference between <Route exact path="/" /> and <Route path="/" />

Examples related to reactjs

Examples related to react-router

Examples related to react-router-dom