Question

我正在尝试根据用户的点击为每个商品设置一个自定义URL。当用户单击“查看项目”时，我想重定向到带有项目名称和ID的自定义URL，例如：“ http：// localhost：3000 / item-1 / -MC_xbIMm8zctEWRJ-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>

在相应的函数中是（routeChange）：

routeChange(name, id) {
var parameter1 = name.replace(/\s+/g, '-'); 
var parameter2 = id; 
window.location.href="/"+parameter1+"/"+parameter2+"/";
}

现在我的问题是，如何向该自定义URL添加组件？我尝试做类似的事情

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

那是行不通的，因为它只是将变量作为字符串，并且没有得到我想要的路线。我如何才能将组件添加到window.location.href而不没有空白页？还是有更好的方法来创建自定义URL？

Answer 1

看看React路由器的URL params example。如果您想使用带有变量的URL，则可以采用这样的路由：

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

在item组件中，您可以通过name钩子获取id和useParams参数。

Answer 2

在您的Route中，使用模板文字作为路径，并使用渲染道具作为组件。

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

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

2 个答案: