I have 2 components/pages in my application: orderPage and customerPage, here is navigation in the main component:

import { Switch, Route} from 'react-router-dom';
<Switch>
    <Route exact path='/order/:id' component={() => <OrderPage/>}/>
    <Route exact path='/customer/:id' component={CustomerPage}/>
</Switch>

Order page has button/link to open CustomerPage for detailed view of the customer data (customer is attribute of the order). There is button/link on the CustomerPage to close the CustomerPage and navigate back to the OrderPage:

import {Link} from 'react-router-dom'
<button type="button">
    <Link to={'/order/'+this.props.orderId}>Close</Link>
</button>

The problem is, that such navigation unmounts and destroys the order component. I can check this behaviour by the constructor code in OrderPage by outputting formCreateTimestamp:

constructor(props) {
        super(props);
        this.state = {
          ...
          formCreatedTimestamp: new Date(),
        };
        ...
    }

Can I control this behavior and prevent this unmount and destroy? And where can I do such control? Maybe in the code/markup that is responsible for the navigation? How? Or maybe I can implement more sophisticated logic in the OrderPage to prevent the unmount?

Indeed, there is ComponentWillUnmount lifecylce API https://reactjs.org/docs/react-component.html#componentwillunmount but documentation does not mention that the implementation of this API can be used for preventing the unmount (e.g. by throwing some exception inside function).

Order has customer and it is quite common use case to navigate from the order to see the customer details and then navigate back, of couse, OrderPage should not be modified/deleted from DOM tree in such a case, but nevertheless this happens. One can suggest the use of modal dialog for presenting the customer data, but modal dialogs are bad suggestion for the web application that are targeted to the mobile use.

How can I prevent the unmount in React Components? provides the solution with unregiterLeaveHooks and other solutions, but they are more about preventing navigation (e.g. from OrderPage to CustomerPage) and not about keeping OrderPage in unmounted stated while navigation to CustomerPage. That question also mentions that the prevention of unmount should be done in flux/store and not in componentWillUnmount, but that question did not elaborate that further. Acutally I am using flux/state indeed and I would be happy to implement unmounting control logic at the business level (Redux store) and not in some specific component functions.

Prevent component be unmounted with React-router already elaborates my situation and its answers say that such React-Router behavior (automatic creation and unmount of components) is by design and that the only solution is to use the always-existing components (which are placed outside Switch statement) that are made visible/unvisible by relevant CSS. So, possibly my question is duplicate.

0

There are 0 best solutions below