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.