Reactjs 如何在使用React路由器dom匹配url路径时防止React组件卸载

我目前正在努力使用React及其库React路由器dom

要简化：

我已在我的应用程序组件中添加了以下内容：

const App = () => {

  return (
    <Router>
      <Layout>
        <Switch>
           // <Other Routes />
          <Route path='/product/:id' component={ProductScreen} />
          // <Other Routes />
        </Switch>
      </Layout>
    </Router>
  )
}

const-App=（）=>{
返回(
// 
// 
)
}

（单个产品视图）的包装方式如下：

组件嵌入来自react路由器dom的两个链接。它还包括到达上一个或下一个产品所需的逻辑。例如：

<Link 
   className='prev'
   to={`/product/${currentIndex - 1 < 0 ? ids[lastIndex] : ids[currentIndex - 1]}`}
>
   Previous
</Link>

以前的

它可以工作，但我不满意这种方法，因为每次我单击“上一步”或“下一步”时，

都会卸载，这会导致页面上出现一些不美观的东西我想阻止它卸载，以便改为：

---

我试过很多方法，读过医生的书，但我现在被卡住了。如果有人知道如何实现这一点，我很乐意阅读。

您可以按如下方式使用路由嵌套路由：

<Header />
<Main>
<Route path="/products" component={Product> />
</Main>
<Footer />

/>

页上产品

const {url} = useRouteMatch();
render() {
    <>
       <Navbar />
       <Route path=`${url}/:id` component={ProductDetail} />
    </>

}

const{url}=useRouteMatch（）；
render（）{
}

谢谢您的回答。我尝试过你的解决方案，但这不起作用。当我单击prev或next时，

组件仍然会卸载。我只是希望能卸载

，我做了很多次，效果很好。当您在/products/id上更改id时，只会重新加载组件ProductDetail。您是否在componentWillUnmount lifecycle上登录了某些内容？事实上，它现在似乎正在工作。。。不知道我以前搞砸了什么。非常感谢。对于有相同问题的人，我建议检查该链接：