home navlinks link stay active REACT - reactjs

Question

I hoe you are doing well :)
when I click on a link from the navbar, the home link is always active. I tried to add excat to the home route but nothing changed?
if someone can help me please that would be great.
thank you in advance
thank you for your time
import { NavLink } from "react-router-dom";
import { links } from "../utils/constants";
import styled from "styled-components";
const NavMenu = () => {
return (
<Nav>
<ul>
{links.map((link) => {
const { id, url, text } = link;
return (
<li key={id}>
<NavLink to={url}>{text}</NavLink>
</li>
);
})}
</ul>
</Nav>
);
};
const Nav = styled.nav`
////////
.active {
color: var(--white);
}
}
`;
export default NavMenu;
APP.js
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { NavMenu } from "./components";
import { Home, About, Projects, Contact, Error } from "./pages";
const App = () => {
return (
<Router>
<NavMenu />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/projects">
<Projects />
</Route>
<Route exact path="/contact">
<Contact />
</Route>
<Route path="*">
<Error />
</Route>
</Switch>
</Router>
);
};
export default App;

Answer 1

I think you are not using Route Component properly. You should try in this way.
Pass the path and component in the Route instead of wrapping it inside in Route component.
import { HomePage, UserPage } from "./pages";
const routes = [
{
path: '/home',
component: HomePage,
},
{
path: '/user',
component: UserPage,
}]
<Switch>
{routes.map(({ path, component }, index) => (
<Route key={String(index)} exact path={path} component={component} />
))}
</Switch>