如何根据分类生成动态URL并避免URL重复追加问题？

问题原因 #

你当前给Link的to属性用的是相对路径：to={products/${item.cat}}。当页面已经处于/products/gadgets这类路径下时，点击链接会基于当前URL拼接路径，自然就出现了重复追加的情况。

解决方案 #

把Link的路径改成绝对路径，只需要在路径开头加个斜杠/即可：

修改Sidebar.js里的Link代码：

<Link key={item.name} style={{textDecoration: 'none'}} to={`/products/${item.cat}`}>
  <Button variant="outlined">{item.name}</Button>
</Link>

原理说明 #

• 相对路径：不带开头斜杠的路径，会以当前页面的URL为基准拼接。比如当前在/products/gadgets，点击products/gadgets就会变成/products/gadgets/products/gadgets。
• 绝对路径：带开头斜杠的路径，会直接从网站根路径开始跳转，不管当前在哪个页面，最终都会指向/products/xxx，从根源避免了重复拼接的问题。

额外验证 #

你App.js里的路由配置path="/products/:category"是正确的，修改路径后能正常匹配到对应路由，渲染Home组件。

内容的提问来源于stack exchange，提问作者Stykgwar