{"action":"created","issue":{"url":"https://api.github.com/repos/ReactTraining/react-router/issues/4218","repository_url":"https://api.github.com/repos/ReactTraining/react-router","labels_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4218/labels{/name}","comments_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4218/comments","events_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4218/events","html_url":"https://github.com/ReactTraining/react-router/issues/4218","id":191685738,"number":4218,"title":"react router takes two click to update the route","user":{"login":"SanskarSans","id":23137016,"avatar_url":"https://avatars.githubusercontent.com/u/23137016?v=3","gravatar_id":"","url":"https://api.github.com/users/SanskarSans","html_url":"https://github.com/SanskarSans","followers_url":"https://api.github.com/users/SanskarSans/followers","following_url":"https://api.github.com/users/SanskarSans/following{/other_user}","gists_url":"https://api.github.com/users/SanskarSans/gists{/gist_id}","starred_url":"https://api.github.com/users/SanskarSans/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SanskarSans/subscriptions","organizations_url":"https://api.github.com/users/SanskarSans/orgs","repos_url":"https://api.github.com/users/SanskarSans/repos","events_url":"https://api.github.com/users/SanskarSans/events{/privacy}","received_events_url":"https://api.github.com/users/SanskarSans/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-11-25T11:51:24Z","updated_at":"2016-11-26T02:27:32Z","closed_at":"2016-11-26T02:27:32Z","body":"I have used react-router v4 for routing in my application. I have used routing to show various form like for showing apartment form, experience form, login, register etc.\r\n\r\n**Issue**\r\n\r\nWhen i click on apartment image, react router routes to apartment form. The route becomes /apartment. If i again then click on register button, the route do not get updated. I have to double click on register button to update the route to /register.\r\n\r\n```javascript\r\nclass App extends Component {\r\n  constructor(props, context) {\r\n    super(props, context);\r\n    console.log('context', context);\r\n    this.state = { show: false };\r\n  }\r\n\r\n  showModal(e) {\r\n    e.preventDefault();\r\n    this.setState({ show: true });\r\n  }\r\n\r\n  hideModal() {\r\n    this.setState({ show: false });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n        <div className=\"container-fluid\">\r\n          <Nav\r\n            showModal={(e) => this.showModal(e)}\r\n            hideModal={() => this.hideModal()}\r\n            show={this.state.show}\r\n            onHide={() => this.hideModal()}\r\n          />\r\n        </div>\r\n        );\r\n  }\r\n}\r\n\r\nApp.contextTypes = {\r\n  router: React.PropTypes.object\r\n};\r\n\r\n\r\n\r\nconst Nav = (props) => (\r\n  <Router>\r\n    <div>\r\n      <nav className=\"navbar navbar-default\">\r\n        <div className=\"container-fluid\">\r\n          <div className=\"navbar-header\">\r\n            <a className=\"navbar-brand\" href=\"\">\r\n              <img\r\n                alt=\"Brand\"\r\n                className=\"img-responsive\"\r\n                src={logo}\r\n                role=\"presentation\"\r\n              />\r\n            </a>\r\n          </div>\r\n          <div className=\"collapse navbar-collapse\" id=\"collapse-1\">\r\n            <ul className=\"nav navbar-nav navbar-right nav-social-icon\">\r\n              <li className=\"dropdown\">\r\n                <a\r\n                  href=\"\"\r\n                  className=\"dropdown-toggle\"\r\n                  data-toggle=\"dropdown\"\r\n                >\r\n                  ES\r\n                  <span className=\"caret\" />\r\n                </a>\r\n                <ul className=\"dropdown-menu\" style={{ color: '#000', fontWeight: 'bold' }}>\r\n                  <li onClick={() => props.selectedLocale('en')}>\r\n                    en\r\n                  </li>\r\n                  <li onClick={() => props.selectedLocale('es')}>\r\n                    es\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n              <li className=\"btn-group regLog\">\r\n                <button\r\n                  className=\"btn btn-default\"\r\n                  onClick={props.showModal}\r\n                >\r\n                  <Link to={{ pathname: '/signup' }}>\r\n                    {props.intl.formatMessage({ id: 'nav.registration.text' }) }\r\n                  </Link>\r\n                </button>\r\n                <button\r\n                  onClick={props.showModal}\r\n                  className=\"btn btn-default\"\r\n                >\r\n                  <Link to={{ pathname: '/login' }}>\r\n                    {props.intl.formatMessage({ id: 'nav.login.text' }) }\r\n                  </Link>\r\n                </button>\r\n                {props.show ?\r\n                  <ModalForm\r\n                    show={props.show}\r\n                    onHide={props.onHide}\r\n                  /> : <span />\r\n                }\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </nav>\r\n    </div>\r\n  </Router>\r\n  );\r\n\r\n\r\nclass ModalForm extends Component {\r\n  render() {\r\n    const { show, onHide, intl } = this.props;\r\n    return (\r\n      <Router>\r\n        <Modal\r\n          {...this.props}\r\n          show={show}\r\n          onHide={onHide}\r\n          dialogClassName=\"custom-modal\"\r\n        >\r\n          <Modal.Header closeButton>\r\n            <Link to='/login' className=\"logTitle\">\r\n              <Modal.Title id=\"contained-modal-title-lg\">\r\n                {intl.formatMessage({ id: 'nav.login.text' })}\r\n              </Modal.Title>\r\n            </Link>\r\n            <Link to='/signup' className=\"logTitle\">\r\n              <Modal.Title id=\"contained-modal-title-lg\">\r\n                {intl.formatMessage({ id: 'nav.registration.text' })}\r\n              </Modal.Title>\r\n            </Link>\r\n          </Modal.Header>\r\n          <Modal.Body>\r\n            <Match pattern='/login' component={Login} />\r\n            <Match pattern='/signup' component={Signup} />\r\n          </Modal.Body>\r\n        </Modal>\r\n      </Router>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\nI think its because of using onClick and Link at a time. So i used router contextTypes in App component as it is a parent component and showModal(onClick function is handled by this function) to redirect to /signup or /login doing this.context.router.transitionTo(e.target.href)  but i get context as undefined.\r\n\r\n \r\n"},"comment":{"url":"https://api.github.com/repos/ReactTraining/react-router/issues/comments/263039593","html_url":"https://github.com/ReactTraining/react-router/issues/4218#issuecomment-263039593","issue_url":"https://api.github.com/repos/ReactTraining/react-router/issues/4218","id":263039593,"user":{"login":"timdorr","id":17882,"avatar_url":"https://avatars.githubusercontent.com/u/17882?v=3","gravatar_id":"","url":"https://api.github.com/users/timdorr","html_url":"https://github.com/timdorr","followers_url":"https://api.github.com/users/timdorr/followers","following_url":"https://api.github.com/users/timdorr/following{/other_user}","gists_url":"https://api.github.com/users/timdorr/gists{/gist_id}","starred_url":"https://api.github.com/users/timdorr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/timdorr/subscriptions","organizations_url":"https://api.github.com/users/timdorr/orgs","repos_url":"https://api.github.com/users/timdorr/repos","events_url":"https://api.github.com/users/timdorr/events{/privacy}","received_events_url":"https://api.github.com/users/timdorr/received_events","type":"User","site_admin":false},"created_at":"2016-11-26T02:27:32Z","updated_at":"2016-11-26T02:27:32Z","body":"Yes, it absolutely is. @SimeonC posted some initial documentation for it here: https://github.com/ReactTraining/react-router/pull/4194/files\r\n\r\nThis is a usage question, not a bug report. Please post this kind of thing on Stack Overflow or Reactiflux so we can keep this place only for tracking bugs. Thanks!"}}
{"actor":{"display_login":"timdorr"}}