I am working on implementing unique custom URLs for each item based on user interaction. After a user clicks "View Item", I want to redirect them to a URL that includes the item's name and ID, like this: "http://localhost:3000/item-1/-MC_xbIMm8zctEWRJ-Lj/". However, instead of the desired result, I end up with a blank page. The code snippet responsible for this functionality is as follows:
<Button style={{color: '#fff',display: 'flex', padding: 0, paddingLeft: "5px"}} startIcon={<AddShoppingCartIcon/>}
onClick={() => this.routeChange(itemKeys[key].name,itemKeys[key].id )}> View Item </Button>
The function (routeChange) called upon clicking looks like this:
routeChange(name, id) {
var parameter1 = name.replace(/\s+/g, '-');
var parameter2 = id;
window.location.href="/"+parameter1+"/"+parameter2+"/";
}
My current concern is how can I incorporate a component into this custom URL? I attempted something like the following:
<Route path="/${itemKey[key].name}/${itemKey[key].id}" component={Item} />
However, this approach did not yield the expected outcome, treating the variables as strings rather than routing correctly. Is there a way to include a component in the window location and avoid ending up with a blank page? Alternatively, are there better methods for creating custom URLs?