React Router Dom Pathname keeps nesting - reactjs

Question

I have a React app in which a search options is included in the navbar, and can be accessed anywhere in the app. Whenever a user searches and then clicks on one of the products show, it should send them to a detail view of that product.
The problem I am facing is with routing. Whenever I search and click in the product for the first time, it correctly redirects to, as an example, http://localhost:3000/catalogue/women/sportive-shoes-sneakers/sneakers--low-top-sneaker/292487. However, if once I am in that route I try to go send the user to another product, it formulates the url like this: http://localhost:3000/catalogue/women/sportive-shoes-sneakers/sneakers--low-top-sneaker/catalogue/men/denim-pants/jeans/293140. As you can see, it's nesting the pathnames one after the other.
My code looks like this:
this.state.displayProducts.map((product, index) => {
return (
<NavLink strict to={{
pathname: `catalogue/${StringUtil.getUrlFromString(product.line)}/${StringUtil.getUrlFromString(product.familyName)}/${StringUtil.getUrlFromString(product.subfamilyName)}/${product.id[0] || product.id}`,
selectedProduct: product
}} key={index}>
<div className="catalogue-productlist-product" onClick={this.props.wipeInput && this.props.wipeInput}>
<img src={product.images && product.images[0] ? product.images[0].replace('{authorization}', this.props.token) : this.props.placeholder}
alt="Category" onError={this.imgError} />
<div>
{product.productName}
</div>
</div>
</NavLink>
)
})
And my Route like this:
<Route
exact path="/catalogue"
render={(props) => (
window.location.search.length > 0 ?
<ProductList />
:
<Slider
{...props}
categories={this.props.categories}
/>
)}
/>
<Route
exact path={`/catalogue/search/:qs`}
component={ProductList}
/>
<Route
exact path={`/catalogue/:line/:family?/`}
render={(props) => (
<Slider
{...props}
categories={this.props.categories}
/>
)} />
<Route
exact path={`/catalogue/:line/:family/:subfamily`}
component={ProductList} />
<Route
exact path={`/catalogue/:line/:family/:subfamily/:product`}
component={ProductDetail} />
How would one go about it working as intended? ie: no matter the current route, the user should always be sent to wherever the navlink send them.

Answer 1

The problem lies here in your pathname, you should always consider add a leading slash in your pathnames just like this:
...
pathname: `/catalogue/${StringUtil.getUrlFromString(product.line)}/${StringUtil.getUrlFromString(product.familyName)}/${StringUtil.getUrlFromString(product.subfamilyName)}/${product.id[0] || product.id}`
...
If you don't use this leading slash in your link navigation it will always append the path you provided to the previous path that you provided, so it will make your first redirect nice and tidy then the upcoming ones will append to the existing path that you are in right now.
NOTE: If you always want to change the whole directory with each product selected consider adding leading slash in your pathname, otherwise, you should use an alternative way.

Answer 2

I think i know what the problem is, I am not 100% sure but going to go out on a limb, because I have encountered similar issues in the past, I think you need to add a '/' to the pathname value before 'catalogue'.
...
return (
<NavLink strict to={{
pathname: `/catalogue/${StringUtil.getUrlFromString(product.line)}/${StringUtil.getUrlFromString(product.familyName)}/${StringUtil.getUrlFromString(product.subfamilyName)}/${product.id[0] || product.id}`,
...
Because it is not prefixed with '/', it is appending the path to the current path rather than starting it from the beginning.