React router exact property is not working

Admin 1
Viewed 9739

The purpose of exact property in react router is, don't do partial matching of routes. But, in my case, it is not doing.

I have two component Write an article and View a particular article with id. I defined route for both as:

<Route exact path='/article/write' exact component={ArticleOrBlog}/>   
<Route exact  path='/article/:id'  component={ArticleOne}></Route>

Both route have exact property. Expected behaviour is, when ArticleOrBlog component render then ArticleOne must not, and vice-versa.

Here the problem concurs.

When ArticleOne component renders then ArticleOrBlog component is not rendering, but when ArticleOrBlog component renders then ArticleOne components is also rendering. ArticleOne Component is rendering below ArticleOrBlog component.

Here behaviour changes

When i define routes like:

<Route exact path='/write' exact component={ArticleOrBlog}/>   
<Route exact  path='/article/:id'  component={ArticleOne}></Route> 

<Route exact path='/write/anything' exact component={ArticleOrBlog}/>   
<Route exact  path='/article/:id'  component={ArticleOne}></Route>

then it works fine.

react-router reactjs path
1 Answers

when ArticleOrBlog component renders then ArticleOne components is also rendering

Reason why ArticleOne component also renders is because you have a dynamic param :id in the route which matches anything, including 'write' in /article/write.

exact prop doesn't stops react router from rendering all the matching routes; it only ensures that only exactly matched routes are rendered.

So when the route is /article/write, it matches two exact paths:

  • /article/write
  • /article/:id

so both components are rendered instead of just one.

When you change routes to /write or /article/:id, then it works as expected because now /article/:id is completely different from /write.

Solution:

Use Switch component that will ensure that only first matched route is rendered.

<Switch>
   <Route exact path="/article/write" component={ArticleOrBlog} />
   <Route exact path="/article/:id" component={ArticleOne} />
</Switch>

One thing to keep in mind here is that when using Switch like shown above, order in which Route components are defined - matters.

In your case, Route with path /article/write should be defined before Route with path /article/:id. This is because if /article/:id is defined before /article/write, then because of the dynamic param :id, /article/write will match /article/:id path and because of Switch, component at /article/write path will never be rendered.

user_60943480
Related