CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
Learn AspNet
Learn AspNet

Reputation: 1622

Routing in ReactJs, remove/unMount the parent component after the link is clicked

I am very new to ReactJS. I am trying to add a new link to the page and when I click on it, it should take it to a separate page and the parent component should be unMounted. I am using React Hooks. So when I am using routing, it does route to the new component correctly but it does not unrender the previous component

Code for

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;

Code for EditCustomers

const EditCustomers= (props) => {
useEffect(() =>{ do something...});

 return (
<>

<div> Hello </div>
</>

)
};

So I click on Edit Customer, It goes to edit customer and show me Hello but it keeps showing the data for Customers component as well. How can I just move it to the newer component render and unMount the GetCustomers html

Upvotes: 0

Views: 655

Answers (1)

Halim
Halim

Reputation: 278

UPDATED this is happening because Customer component is not inside the so it will be always mounted, you should use a route for customer component too, here is an example i just made it might help you https://codesandbox.io/s/youthful-aryabhata-o1g2g?file=/src/App.js

Upvotes: 1

Related Questions