React-Router Reloads Component When Navigating Away From It

Question

I am trying to get up to speed with React and Redux. I currently have a setup like this:

The store's state has an 'activeAction' property that takes a number. The 'activeAction' is used by the Page component to determine which component it should display in the center of the application, and is changed based on the current URL. For example, '/Home' is activeAction: 0, and '/About' is activeAction: 1

The component for /Home is called BlogRoll, and this component has actual logic in it to display posts from a blogger api call. I am calling the action to display the posts in the components componentDidMount function. The component for /About only has a render function that says 'Content Area'...just a placeholder for now.

My navigation is set up as Link components:

<div className="NavItem">
   <Link to={'/Home'} activeClassName="ActiveMenuItem">Home</Link>
</div>
<div className="NavItem">
   <Link to={'/About'} activeClassName="ActiveMenuItem">About</Link>
</div>

The problem I am having is after clicking the Home Link (which works fine) then clicking the About Link , the BlogRoll compenent is getting reloaded before going to the About component. I know this by putting a break point in BlogRoll.componentDidMount() . I click to go to About but before that happens it reloads BlogRoll.

Is this intentional behavior? It doesn't seem like it should do this, but I am still learning and may not fully understand the component lifecycle yet.

Thanks for your help!

Answer 1

It's an intentional behavior.

In React-router component gets unmounted if it isn't rendered.

You can read more about the component lifecycle in the react-router repo .

If you want persistent states in your components, you can use the Redux store.