两页相互重叠

Posted

技术标签:

【中文标题】两页相互重叠【英文标题】:Two pages overlapping each other 【发布时间】:2019-03-25 16:50:21 【问题描述】:

点击编辑按钮后,两个页面(产品和编辑产品页面)相互重叠。它不是重定向到编辑页面,而是在当前页面下方。

这是我的文件内容。 https://codesandbox.io/s/mmwqz8lz8p

【问题讨论】:

【参考方案1】:

在产品路径中使用exact

因为产品编辑路径/链接/products/:id是产品链接/products的子链接。当您设置不带exact 的路径并转到产品编辑链接/products/:id 时,它包含产品/products 和产品编辑/products/:id 的路径。那么为什么当您转到产品编辑页面时,两条路线都在工作,而 productseditProduct 两个组件都显示了。

要解决此问题,您必须为产品路线使用 exact 属性 true。跟关注一样

<Route exact path='/products' component=products/>

【讨论】:

有什么需要? 已编辑答案。如果你喜欢了解更多关于exact属性read this ans【参考方案2】:

鉴于您在代码中使用了 Switch 组件,例如

<Router>
   <Switch>
      <div className="App">
        <Route path='/' exact=true component=loginscreen/>
        <Route path='/users' exact=true component=users/>
        <Route path='/users/:id' component=userEdit/>
        <Route path='/products' component=products/>
        <Route path='/products/:id' component=editProduct/>
        <Route path='/addproducts' component=addProduct/>
        <Route path='/album' component=album/>
        <Route path='/main' component=main/>
      </div>
   </Switch>
 </Router>

您描述的行为与您在问题中描述的行为不同。 Switch 组件匹配第一个 Route 并跳过其余部分。此外,React 路由器匹配的工作方式是任何 Route 路径也将匹配其前缀路由,例如,/products/:id 也将匹配 /products 并且不使用 Switch 将呈现所有匹配项。

根据您的上述配置,/products/:id 也将仅呈现 /products 页面。为了让它正常工作,只需颠倒您的路线顺序,

 <Switch>
      <div className="App">
        <Route path='/' exact=true component=loginscreen/>
        <Route path='/users' exact=true component=users/>
        <Route path='/users/:id' component=userEdit/>
        <Route path='/products/:id' component=editProduct/>
        <Route path='/products' component=products/>
        <Route path='/addproducts' component=addProduct/>
        <Route path='/album' component=album/>
        <Route path='/main' component=main/>
      </div>
   </Switch>

P.S.原则上,所有前缀路由都必须按顺序写在后面。

【讨论】:

以上是关于两页相互重叠的主要内容,如果未能解决你的问题,请参考以下文章

为啥 UITableViewCell 相互重叠?

Xcode 6自动布局按钮相互重叠

Bootstrap 网格列相互重叠

如何绘制两个相互重叠的图形?

2 TextViews 在约束布局中相互重叠

片段相互重叠