两页相互重叠
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
的路径。那么为什么当您转到产品编辑页面时,两条路线都在工作,而 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.原则上,所有前缀路由都必须按顺序写在后面。
【讨论】:
以上是关于两页相互重叠的主要内容,如果未能解决你的问题,请参考以下文章