How to prevent a React component from unmounting when url path is matched using react-router-dom

Question

I'm currently struggling using React and its library react-router-dom.

To simplify:

I've this in my App component:

const App = () => {

  return (
    <Router>
      <Layout>
        <Switch>
           // <Other Routes />
          <Route path='/product/:id' component={ProductScreen} />
          // <Other Routes />
        </Switch>
      </Layout>
    </Router>
  )
}

The <ProductScreen /> (single product view) is wrapped like this:

The <ProductNav /> component embeds two links from react-router-dom. It also includes the required logic to reach previous or next product. Like so for instance:

<Link 
   className='prev'
   to={`/product/${currentIndex - 1 < 0 ? ids[lastIndex] : ids[currentIndex - 1]}`}
>
   Previous
</Link>

It's working but I'm not satisfied with that approach because the <ProductScreen /> unmounts each time I click 'previous' or 'next' and this leads to some unaesthetic things on the page. I would like to prevent it from unmounting in order to have this instead:

I tried many things, read the doc but I'm quite stuck right now. If anyone has any idea of how to achieve that I would be glad to read it.

cuongdevjs · Accepted Answer · 2021-01-23 01:03:32Z

1

You can use Route nested Route as following:

<Header />
<Main>
<Route path="/products" component={Product> />
</Main>
<Footer />

on page Product

const {url} = useRouteMatch();
render() {
    <>
       <Navbar />
       <Route path=`${url}/:id` component={ProductDetail} />
    </>

}

answered Jan 23, 2021 at 1:03

cuongdevjs

7316 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chalatum Over a year ago

Thank you for your answer. I gave a try to your solution but this isn't working. When I click on prev or next, the <ProductScreen /> component still unmounts. I was expecting just to have the <ProductDetail /> to unmount...

cuongdevjs Over a year ago

I was doing it multiple times and it works. when you change id on /products/id, only component ProductDetail is reloaded.

cuongdevjs Over a year ago

did you log something on componentWillUnmount lifecycle?

chalatum Over a year ago

In fact it seems working now... Don't know what I was messing up before. Thank you. For anyone having the same troubles I would recommend to check that link: reactrouter.com/web/example/nesting

Collectives™ on Stack Overflow

How to prevent a React component from unmounting when url path is matched using react-router-dom

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related