时间戳

首页 > 解决方案 > ReactJs中的路由，点击链接后移除/卸载父组件

javascript - 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>
</>

)
};

所以我点击编辑客户，它会编辑客户并向我显示你好，但它也一直显示客户组件的数据。如何将其移动到较新的组件渲染并卸载 GetCustomers html

标签： javascriptreactjsreact-routerreact-router-v4

解决方案

更新了这种情况，因为客户组件不在内部，因此它将始终安装，您也应该为客户组件使用路由，这是我刚刚制作的一个示例，它可能会对您有所帮助https://codesandbox.io/s/youthful -aryabhata-o1g2g?file=/src/App.js

推荐阅读