两页相互重叠

Posted 2023-02-21

【中文标题】两页相互重叠

【英文标题】：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 的路径。那么为什么当您转到产品编辑页面时，两条路线都在工作，而 products 和 editProduct 两个组件都显示了。

要解决此问题，您必须为产品路线使用 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.原则上，所有前缀路由都必须按顺序写在后面。