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>

score 0 · Answer 1 · answered Oct 26 '21 at 09:36

0

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)

answered Oct 26 '21 at 09:36

Arshal_d

116
1
6

thanks, but I have try to use exact but it's still not work – Thanh Hải Oct 26 '21 at 09:43
@ThanhHải Does the Router component encapsulate all your other components also please show entire code – Arshal_d Oct 26 '21 at 09:49
here my code : [link](https://github.com/thanhproo1412/my-gs-client) – Thanh Hải Oct 26 '21 at 10:05
@ThanhHải try using 'Link' from react-router-dom it will fix the issue {user.name} – Arshal_d Oct 26 '21 at 13:36
idk, it's still not working, it's working when i use ` {faClipboardListIcon} Store ` ( i have remove /adminboard ) – Thanh Hải Nov 07 '21 at 15:06
but i need to use the path /adminboard/... – Thanh Hải Nov 07 '21 at 15:22
1

i try to update react-router-dom to v6, it's ok for now – Thanh Hải Nov 08 '21 at 14:47

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

1 Answers1