Question

基本上，如果我单击导航栏链接之一，即729 732，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

因此，我的网址中有一个navlink路径位于另一个路径的前面，因此页面上没有显示任何内容。

我目前唯一的解决方法是使用浏览器中的“后退”按钮。并使网址遵循逻辑顺序。

我假设我正在使用可重用组件作为变量链接，其方式可能会引起问题。

这是app.js

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

请注意如何多次使用<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} />。取决于三种不同的粘合剂之一。我有种感觉混在一起吗？我只是不确定该怎么做？

Here's my git repo for this web app

谢谢您的想法/评论！

Answer 1

我对答案表示怀疑，因此我下载了回购协议进行测试。在导航栏组件上，链接的组件具有以下内容：

<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>

...它将正常工作！

react-router-dom：单击“链接”将路由不确定地添加到“ URL”

1 个答案: