Reactjs 如何将组件添加到window.location.href？

我正在尝试根据用户的点击为我拥有的每个项目创建一个自定义URL。当用户单击“查看项目”时，我想重定向到带有项目名称和ID的自定义URL，例如：http://localhost:3000/item-1/-MC_xbim8zctewrj-Lj/”。但是，我只得到一张空白页。我通过以下代码实现了这一点：

<Button style={{color: '#fff',display: 'flex', padding: 0, paddingLeft: "5px"}} startIcon={<AddShoppingCartIcon/>} 
onClick={() => this.routeChange(itemKeys[key].name,itemKeys[key].id )}> View Item </Button>

现在我的问题是，如何将组件添加到此自定义URL？我试着做一些类似的事情

<Route path="/${itemKey[key].name}/${itemKey[key].id}" component={Item} />

---

这不起作用，因为它只是把变量当作字符串，没有得到我想要的路径。如何将组件添加到window.location.href，而不使用空白页面？或者有没有更好的方法来创建自定义URL？

看看React路由器。如果希望URL带有变量，可以使用如下路由：

<Route path="/:name/:id" component={Item} />

---

在item组件中，您可以通过

useparms

hook获得

name

和

id

param。

查看React路由器的。如果希望URL带有变量，可以使用如下路由：

<Route path="/:name/:id" component={Item} />

---

在item组件中，您可以通过

useparms

hook获得

name

和

id

param。

在

路径中

为路径使用模板文字，为组件使用渲染道具

<Route exact path=`${itemKeys[key].name/${itemKeys[key].id}` 
    render={(props) => <Item {...props} />} />

}/>

在

路径中

为路径使用模板文字，为组件使用渲染道具

<Route exact path=`${itemKeys[key].name/${itemKeys[key].id}` 
    render={(props) => <Item {...props} />} />

}/>

尝试使用模板文字（使用反勾号而不是双引号）。这是一个好主意，我尝试过，效果很好。但是，由于某些原因，它无法正确读取组件。试着这样做：

}/>

where'是一个反勾号（我不知道如何将它粘贴到这里），这就解决了它！谢谢：DGlad to help:）我已经添加了一个答案，请接受它，thanksTry使用了一个模板文字（使用反勾号而不是双引号）。这是一个好主意，我尝试了它，它成功了。但是，由于某些原因，它无法正确读取组件。试着这样做：

}/>

where'是一个反勾号（我不知道如何将它粘贴到这里），这就解决了它！谢谢：DGlad帮助：）我已经添加了一个答案，请接受它，谢谢你的帮助。但是，我现在有个问题。前一个组件未被删除，它与“项”组件冲突。知道为什么吗？试着把路线放进交换机或使用

exact

prop。我都试过了，但还是有问题。但是我尝试它要么是空白页，要么两个组件一起。我尝试了路由器和交换机的不同组合，但没有任何效果。那种效果很好。但是，我现在有个问题。前一个组件未被删除，它与“项”组件冲突。知道为什么吗？试着把路线放进交换机或使用

exact

prop。我都试过了，但还是有问题。但是我尝试它要么是空白页，要么两个组件一起。我尝试了路由器和交换机的不同组合，但没有任何效果。