Reactjs 如何使用react router在不更改静态组件的情况下删除动态组件

我有如下页面设置

红色区域为静态区域，绿色区域为动态区域。在侧栏中有一个导航面板。当用户单击导航栏中的按钮时，我希望更新绿色区域，而不重新渲染红色静态区域。如何实现这一点

请注意，我正在使用react-native开发此应用程序，我想要一个也可以应用于react-native项目的解决方案

请给我一个详细的解决方案

例如，谢谢你

<div className={styles.wrapper}>
   <div>Navigation</div>
   <div>{children}</div>
   <div>Footer</div>
 </div>

---

你能给我解释一下这个代码吗？我不知道如何在我的代码中实现它