react-router-dom：点击链接无限期添加到Url的路由

Question

基本上，如果我点击导航栏链接之一，即hotmelt、pressureSensitive、liquids。

http://localhost:3000/hotmelt ,
http://localhost:3000/pressure-sensitive ,
http://localhost:3000/liquid

然后单击其中一页下列出的粘合剂类型之一，即fg3000

http://localhost:3000/pressure-sensitive/fg3000

它显示点击的项目。但是，当我点击另一个导航栏链接时， 即hotmelt, 而不是删除 pressure-sensitive/fg3000 并看起来像这样：http://localhost:3000/hotmelt

我明白了：http://localhost:3000/pressure-sensitive/hotmelt

所以我在 url 中有一个 navlink 路径位于另一个之前，因此页面上没有显示任何内容。

我目前唯一的解决方法是使用浏览器中的后退按钮。这让 url 遵循逻辑顺序。

我假设我正在使用可重用组件作为变量链接，这可能会导致问题。

这里是 app.js

<Route exact path="/hotmelt" component={Hotmelt} />
<Route exact path="/hotmelt/:id" component={SingleAdhesive} />
<Route exact path="/liquid" component={Liquid} />
<Route exact path="/liquid/:id" component={SingleAdhesive} />
<Route exact path="/pressure-sensitive" component={PressureSensitive} />
<Route exact path="/pressure-sensitive/:id" component={SingleAdhesive} />

注意SingleAdhesives 是如何被多次使用的。取决于三种不同粘合剂中的一种。我有一种混在一起的感觉？我只是不知道该怎么办？

Here's my git repo for this web app

感谢您的想法/cmets！

Answer 1

我对答案有疑问，所以我下载了 repo 来测试它。在您的导航栏组件上，您的链接组件具有如下内容：

<Link to="hotmelt" className="nav-link text-white" >Hot Melt<span className="sr-only"></span></Link>

只需在热熔之前添加一个/，如下所示：

<Link to="/hotmelt" className="nav-link text-white" >Hot Melt<span className="sr-only"></span></Link>

...它会正常工作的！