React Router Param bug - node.js

Question

EDIT: I found the issue, I went ahead and double checked my Header Component. I was using a relative path "login" as opposed to an absolute path "/login". When I switched from "login" to "/login" the issue was fixed.
I am having issues with react router. I have the App Class component where I locate all my routes. The issue is that when I go to the "Products" page (http://localhost:3000/products) I can link directly to the "ProductPage" where I get the route "http://localhost:3000/products/Scotts"; however when I navigate from that route to another route insted for example the "LoginPage" I get the following route "http://localhost:3000/products/login" as opposed to "http://localhost:3000/login". I will share the important code snippets below.
<Router>
<div className="App">
<ScrollToTop />
<Header/>
<Switch >
<Route exact path="/" component={ LandingPage }/>
<Route exact path="/login" component={ LoginPage }/>
<Route exact path="/products" component={ Products }/>
<Route
exact
path="/products/:product"
render={props => {
return <ProductPage {...props} />;
}}
/>
<Route path="resetPassword/:id" component={ChangePassword} />
</Switch>
<Footer />
</div>
</Router>
Here I am linking from the Products route to the Product's single page route:
{currentProducts.map(item => {
const { image, title, price, stock } = item;
return (
<div className="product-wrap" key={uuid()}>
<Link
to={{
pathname: `${location.pathname}/${item.title}`,
state: {
item: item,
inStock: stock
}
}}
>
<div>
<div className="product">
<div className="circle">
<img alt="item" src={image} />
</div>
</div>
</div>
</Link>
<div
style={{ textDecoration: "none", color: "black" }}
className="title"
>
{title}
</div>
<div
style={{ textDecoration: "none", color: "black" }}
className="price"
>
${price}
</div>
</div>
);
})}