如何解决在ReactJs中进行路由,单击链接后移除/取消安装父组件
我对ReactJS非常陌生。我试图在页面上添加一个新链接,当我单击它时,它应该将其带到单独的页面,并且父组件应该未安装。我正在使用React Hooks。因此,当我使用路由时,它确实可以正确路由到新组件,但不会取消渲染先前的组件
代码
const GetCustomers = (props) => {
useEffect(() =>{ do something...});
return (
<>
<ErrorBoundary>
<Router>
<>
<Link to="/EditCustomer">Edit Customer</Link>
<Route component={EditCustomer} path="/EditCustomer" />
</>
</Router>
</ErrorBoundary>
<Customer> Do alot </Customer>
</>
)
};
export default GetCustomers;
EditCustomers的代码
const EditCustomers= (props) => {
useEffect(() =>{ do something...});
return (
<>
<div> Hello </div>
</>
)
};
因此,我单击“编辑客户”,它会去编辑客户并显示“ Hello”,但它还会继续显示“客户”组件的数据。如何将其移动到较新的组件渲染并取消安装GetCustomers html
解决方法
已更新 之所以发生这种情况是因为“客户”组件不在内部,因此它将始终挂载,您也应该为“客户”组件使用路由,这是我刚刚制作的一个示例,它可能会对您有所帮助https://codesandbox.io/s/youthful-aryabhata-o1g2g?file=/src/App.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。