NavLink react-router-dom not working ( working if refresh page )

Question

I have try to use NavLink in react-router-dom but something not working. Thanks for any help.

I'm in Profile page, i click <NavLink to="/adminboard/settings"> and it change the path to '/adminboard/settings' and activeClassName in Settings but i'm still in Profile page. Then i refresh page, it's going to the Settings page.

my code :

<AdminNav style={{ margin: '0px', padding: '0px', marginTop: '160px' }}>
    <Router style={{ margin: '0px', padding: '0px' }}>
        <Switch style={{ margin: '0px', padding: '0px' }}>
           <Route exact path="/adminboard/profile" component={AdminboardProfile} />
           <Route exact path="/adminboard/postsanpham" component={AdminPostSanPham} />
           <Route exact path="/adminboard/settings" component={AdminSetting} />
           <Route exact path="/adminboard/store" component={AdminStore} />
        </Switch>
    </Router>
</AdminNav>

my Nav code:

<NavLink to="/adminboard/profile" activeClassName="active">
  <span>{faUserIcon}</span>
  <span>Profile</span>
</NavLink>
<NavLink to="/adminboard/postsanpham" activeClassName="active">
   <span>{postsanpham}</span>
   <span>Store</span>
</NavLink>
<NavLink to="/adminboard/store" activeClassName="active">
   <span>{faClipboardListIcon}</span>
   <span>Store</span>
</NavLink>
<NavLink to="/adminboard/settings" activeClassName="active">
   <span>{faToolboxIcon}</span>
   <span>Settings</span>
</NavLink>

Answer 1

I guess the problem is because you did not use the exact attribute as in

<Route exact path='/category' component={Category}></Route>

exact will look for complete route ie '/adminboard/settings' if exact is not used it will stop looking further if a match is first found (it matches with 'adminboard' and will not look further)