CODEWITHSUNDEEP
reactjsreact-router-dom
Anoop Chillayi Kochappu
Anoop Chillayi Kochappu

Reputation: 168

React child routes remounting on click

I am using a child route as follows

    <NavItem eventKey="player_list">
            <NavText>
              <Link
                className={Styles.navText}
                to={`${this.props.match.url}/player_list`}
              >
                Player
              </Link>
            </NavText>
          </NavItem>

          <main>
     <Switch>
        <Route
          path={`${this.props.match.path}/player_list`}
          component={props => (
            <PlayerList {...props} basePath={this.props.match.path} />
          )}
        />

        </Switch>
</main>

whenever I click on the Link, the PlayerList Component is remounted. How to block this behaviour

Upvotes: 1

Views: 102

Answers (1)

Agney
Agney

Reputation: 19194

From the docs:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop.

Instead what you can do is to use render function:

<Route
  path={`${this.props.match.path}/player_list`}
  render={props => (
   <PlayerList {...props} basePath={this.props.match.path} />
  )}
/>

Docs on render

Upvotes: 3

Related Questions