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.
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
Most helpful comment
I managed to solve this by wrapping my
connected component withwithRouter: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md