两页相互重叠

Question

单击编辑按钮后，两个页面（产品和编辑产品页面）彼此重叠。该页面位于当前页面下方，而不是重定向到编辑页面。

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

Answer 1

在产品路线中使用exact。

因为产品编辑路径/链接/products/:id是产品链接/products的子链接。当您设置没有exact的路径并转到产品编辑链接/products/:id时，它包含产品/products和产品编辑/products/:id的路径。那么为什么当您转到产品编辑页面时，两个路由都起作用，而products和editProduct都同时显示。

要解决此问题，您必须为产品路线使用exact属性true。就像跟随

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

Answer 2

鉴于您在代码中使用了Switch Component，例如

<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路由器匹配的工作方式是，任何路由路径也将匹配其前缀路由，例如，/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>

PS 。通常，所有前缀Routes都必须在该顺序的后面写入。