React-router: Click on <Link> doesn't work.

Created on 26 Mar 2017  路  2Comments  路  Source: ReactTraining/react-router

Hi guys,
Could you please help me to figure out with that issue?
I use new react-router v4, and I need get click on element working.
This is like an main file which collect all components (and where I would like to store all Routes logic):

ReactDOM.render(
  <BrowserRouter>
    <App>
      <Route path='/sign-in' render={() => (
    loggedIn ? (
      <Redirect to="/dashboard" />
    ) : (
      <SignIn />
    )
      )} />
      <Route path='/sign-up' render={() => (
    loggedIn ? (
      <Redirect to="/dashboard" />
    ) : (
      <SignUp />
    )
      )} />
    </App>
  </BrowserRouter>,
  document.getElementById('app'));

and this is a code snippet for Header class:

class Header extends React.Component {

  constructor(props) {
    super(props);
    bindAll(this, '_getHeaderItem');
  }

  _getHeaderItem() {
    switch (History.location.pathname) {
      case '/sign-in':
    return <li><Link to='/sign-up'>Sign Up</Link></li>;
    break;

      case '/sign-up':
    return <li><Link to='/sign-in'>Sign In</Link></li>;
    break;

      default:
    return null;
    }
  }

  render() {
    return (
      <Navbar collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Elevator</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
      </Nav>
      <Nav pullRight>
        {this._getHeaderItem()}
        <NavDropdown eventKey={4} id='member-dropdown' title={
          <div className='inline-block'>
        <img src='' alt='' />
        Username
          </div>
        }>
          <MenuItem eventKey={4.1}>My profile</MenuItem>
          <MenuItem eventKey={4.2}>Logout</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={4.3}>Administration</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
      </Navbar>
    );
  }
}

What I have now: if I type '/sign-in' in '/sign-up' directly in address bar, it works. But when I click on component, I can see that path was changed in address bar, but my component isn't rendering.
Please help me to figure out with it.

Most helpful comment

I managed to solve this by wrapping my connected component with withRouter: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

All 2 comments

I edited your code for proper formatting. You need to include three backticks on separate lines for multi-line code formatting (```).

The issue that you're most likely running into is that you're blocking updates. Please see this guide for further details. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

I managed to solve this by wrapping my connected component with withRouter: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

Was this page helpful?
0 / 5 - 0 ratings