React-router: using hash in url, component is re-rendering when using dynamic routes

Created on 28 Sep 2017  路  3Comments  路  Source: ReactTraining/react-router

hi,

i am using react-router 3.0.0 version.

i am stuck with a weird issue, i have a single page which has multiple section.

```import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MainAutoMobile extends Component {
constructor(props) {
super(props)
}
render() {
return (







);
}
}

export default MainAutoMobile;

i have dynamic route file which some what looks like 

require.ensure([], (require) => {
cb(null, require('./dashboard/mainAutoMobile'))
})
}}>
require.ensure([], (require) => {
cb(null, require('./dashboard/autoMobileComponent'))
}) />


Now in my header component, I have hash Link to go the different section like


```

The problem which i am facing is that... my MainAutoMobile first gets unMounted and than again get Mounts when ever i click on any of the hash links.

my browser url is http://localhost:3000/test#bike

I don't know to stop my component from getting re-render again and again, when ever i click on hash links.

All 3 comments

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!

Its a bug as react-router is detecting the changes in the path, which ideally it should not as i am just adding hash value to the same url, since it detects the change in the path it is calling componentUnMount lifecycle method....

also if i changes route and make something like this

<Router history={browserHistory}>
  <Route path='/' component={App}>
    <Route path='test' component={require('./dashboard/mainAutoMobile')}>
      <Route path=":id" component={require('./dashboard/autoMobileComponent')} />
    </Route>
  </Route>
</Router>

no change in the path is detected by the react-router. only in case of dynamic routing, path change is detected and because of that re-rendering is happening

@gauravprwl14 I'm experiencing this same issue and I feel this is a bug as well.

I'm using a 3rd party component that updates the hash to keep some state inside my react-router application and anytime the 3rd party component updates the hash on the same url, react-router runs the componentWillUnmount() lifecycle and causes unexpected behaviors.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

andrewpillar picture andrewpillar  路  3Comments

yormi picture yormi  路  3Comments

ArthurRougier picture ArthurRougier  路  3Comments

imWildCat picture imWildCat  路  3Comments

misterwilliam picture misterwilliam  路  3Comments