Prevent remount component on routes with the same component

[artywhite]

Prevents remount component on routes with the same component.

This issue was described and fixed for react-router here: #4578 , but for react-router-config this bug occurs again due different key value on <Route> component.

Since <Switch> renders only one component there is no need to use unique key prop for <Route>.

Not sure if this is right fix, but it works.

[wmertens]

Can you make this shorter? Seems a waste to put a long string here just to remind devs. key='fixed' would also work, no?

[pshrmn]

This isn't really ideal because it forces all routes to have the same key. What happens if the user wants a re-mount to happen? I think that a better approach would be to allow route objects to have a key property and then prefer that over index

<Route key={route.key || i} ... />

[artywhite]

Added support for key property in route objects

[artywhite]

Thank you guys! Any thoughts when these changes will be released?

[KaroseLiu]

I'm not sure, this commit fixed the bug, I upgraded the latest version v4.2.0 as your release, and try it, the component also remount.

[KaroseLiu]

Here is my layout:

const Layout = ({children, location}) => {
  // url like /:personId/a, /:personId/b
  const personId = location.pathname.split('/')[2]
  // b or a path
  const activeKey = location.pathname.split('/')[3]
  // The problem is every time the path changed, the Profile always componentDidMount.
  return <div>
    <Profile personId={personId}/>
    <Tabs
      type="card"
      activeKey={location.pathname.split('/')[3]}
      onTabClick={(key) => {
        const paths = location.pathname.split('/')
        history.push(`/person/${personId}/${key}`)
      }}
    >
      {tabs.map(tab =>
        (<TabPane tab={tab.title} key={tab.key}>
          {children}
        </TabPane>),
      )}
    </Tabs>
  </div>
}

The below is the Router config:

const routes = [
  {
    path: '/a',
    component: A,
  },
  {
    path: '/b',
    component: B,
  },
  {
    path: '/c',
    component: C,
  },
]
const Router = ({ match }) => (
  <Switch>
    {
      routes.map(({ path, exact, strict, component: Comp }) =>
        (<Route
          key={path}
          path={`${match.url}${path}`}
          exact={exact}
          strict={strict}
          render={
            props => (
              <Layout {...props}>
                <Comp {...props} />
              </Layout>
            )
          }
        />),
      )
    }
  </Switch>
)

Every time the path change, the component will didMount again, so maybe my usage is the incorrect way to reuse the layout?

[wmertens]

Start by setting the Route key to a fixed value. Also, which component is the one remounting?

…

On Wed, Aug 30, 2017, 4:22 AM KaroseLiu ***@***.***> wrote: Here is my layout: const Layout = ({children, location}) => { // url like /:personId/a, /:personId/b const personId = location.pathname.split('/')[2] // b or a path const activeKey = location.pathname.split('/')[3] // The problem is every time the path changed, the Profile always componentDidMount. return <div> <Profile personId={personId}/> <Tabs type="card" activeKey={location.pathname.split('/')[3]} onTabClick={(key) => { const paths = location.pathname.split('/') history.push(`/person/${paths[2]}/${key}`) }} > {tabs.map(tab => (<TabPane tab={tab.title} key={tab.key}> {children} </TabPane>), )} </Tabs> </div> } The below is the Router config: const routes = [ { path: '/a', component: A, }, { path: '/b', component: B, }, { path: '/c', component: C, }, ]const Router = ({ match }) => ( <Switch> { routes.map(({ path, exact, strict, component: Comp }) => (<Route key={path} path={`${match.url}${path}`} exact={exact} strict={strict} render={ props => ( <Layout {...props}> <Comp {...props} /> </Layout> ) } />), ) } </Switch> ) Every time the path change, the component will didMount again, so maybe my usage is the incorrect way to reuse the layout? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5430 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlsDzLdfNsP69XC5omCZ2mtEGHpl2ks5sdMdggaJpZM4O1a08> .

[KaroseLiu]

The above layout, The LEFT container is person Profile and The RIGHT is the change things belong to the path changed component(A, B, C).

Every time url change, the component always remounting. In my mind, the Profile component should not remount when path changed.

const Layout = ({children, location}) => {
  return <div>
    // The Profile component will remounting when path changed. 
    <Profile personId={personId}/>
    <Tabs
      type="card"
      activeKey={location.pathname.split('/')[3]}
      onTabClick={(key) => {
        const paths = location.pathname.split('/')
        history.push(`/person/${personId}/${key}`)
      }}
    >
      {tabs.map(tab =>
        (<TabPane tab={tab.title} key={tab.key}>
          {children}
        </TabPane>),
      )}
    </Tabs>
  </div>
}