How to active links dynamically without adding 'active' props menu or with 'active' props applied but detected automatically

[emmannweb]

Describe the bug

      backgroundColor: 'red',
       color: 'green',
},

And for the Menu: <MenuItem active component={<Link to="/seller/dashboard" />} icon={<DashboardIcon />}> Dashboard </MenuItem> <MenuItem component={<Link to="/seller/orders" />} icon={<ReceiptIcon />}> Orders</MenuItem>

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[azouaoui-med]

if you are using react router, the active class will be added automatically, if not you need to use the active prop to add the relevant class to use it for styling

[emmannweb]

Well, thanks for answering! I remember, it worked on some previous version of React Router (6.6.2), With the version that i'm using it's not working, When i check in the source code in the browser, i don't see any active class added, i don't know what's going on. I have added the active class to test it.

[vaynevayne]

same issue, i use react-router v6, can see any class added to dom

[blombosi]

For anyone who has the same issue just use NavLink instead of Link from react-router

[danieleagle]

@blombosi, after spending several hours on this, changing from Link to NavLink totally solved it. Thank you so much.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.