Commit b9fec275b25f98781d4660df14367ab6e0246391
1 parent
36a4c235df
Exists in
master
add fix for active state bug
- Fixes issue where the active state for links wasn't updating. This is due to a bug in React and this implements
a workaround which relies on setting { pure: false } on the main component container to prevent blocking re-renders
when moving between routes (and leaving the active state on the old route). Hopefully this is fixed in the future
as this isn't an ideal implementation.
Showing
5 changed files
with
25 additions
and
14 deletions
Show diff stats
imports/ui/components/app-navigation.js
| ... | ... | @@ -5,8 +5,8 @@ import { PublicNavigation } from './public-navigation'; |
| 5 | 5 | import { AuthenticatedNavigation } from './authenticated-navigation'; |
| 6 | 6 | |
| 7 | 7 | export class AppNavigation extends React.Component { |
| 8 | - renderNavigation( hasUser, activeRoute ) { | |
| 9 | - return hasUser ? <AuthenticatedNavigation activeRoute={ activeRoute } /> : <PublicNavigation activeRoute={ activeRoute } />; | |
| 8 | + renderNavigation( hasUser ) { | |
| 9 | + return hasUser ? <AuthenticatedNavigation /> : <PublicNavigation />; | |
| 10 | 10 | } |
| 11 | 11 | |
| 12 | 12 | render() { |
| ... | ... | @@ -18,7 +18,7 @@ export class AppNavigation extends React.Component { |
| 18 | 18 | <Navbar.Toggle /> |
| 19 | 19 | </Navbar.Header> |
| 20 | 20 | <Navbar.Collapse> |
| 21 | - { this.renderNavigation( this.props.hasUser, this.props.activeRoute ) } | |
| 21 | + { this.renderNavigation( this.props.hasUser ) } | |
| 22 | 22 | </Navbar.Collapse> |
| 23 | 23 | </Navbar>; |
| 24 | 24 | } | ... | ... |
imports/ui/components/authenticated-navigation.js
| 1 | 1 | import React from 'react'; |
| 2 | -import { browserHistory, IndexLink, Link } from 'react-router'; | |
| 2 | +import { browserHistory } from 'react-router'; | |
| 3 | +import { IndexLinkContainer, LinkContainer } from 'react-router-bootstrap'; | |
| 3 | 4 | import { Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; |
| 4 | 5 | |
| 5 | 6 | const handleLogout = () => { |
| ... | ... | @@ -17,8 +18,12 @@ const userName = () => { |
| 17 | 18 | export const AuthenticatedNavigation = () => ( |
| 18 | 19 | <div> |
| 19 | 20 | <Nav> |
| 20 | - <li><IndexLink to="/" activeClassName="active">Index</IndexLink></li> | |
| 21 | - <li><Link to="/dashboard" activeClassName="active">Dashboard</Link></li> | |
| 21 | + <IndexLinkContainer to="/"> | |
| 22 | + <NavItem eventKey={ 1 } href="/">Index</NavItem> | |
| 23 | + </IndexLinkContainer> | |
| 24 | + <LinkContainer to="dashboard"> | |
| 25 | + <NavItem eventKey={ 2 } href="/dashboard">Dashboard</NavItem> | |
| 26 | + </LinkContainer> | |
| 22 | 27 | </Nav> |
| 23 | 28 | <Nav pullRight> |
| 24 | 29 | <NavDropdown eventKey={ 3 } title={ userName() } id="basic-nav-dropdown"> | ... | ... |
imports/ui/components/public-navigation.js
| 1 | 1 | import React from 'react'; |
| 2 | -import { Link } from 'react-router'; | |
| 2 | +import { LinkContainer } from 'react-router-bootstrap'; | |
| 3 | 3 | import { Nav, NavItem } from 'react-bootstrap'; |
| 4 | 4 | |
| 5 | 5 | export const PublicNavigation = () => ( |
| 6 | 6 | <Nav pullRight> |
| 7 | - <li role="presentation"><Link to="/signup">Sign Up</Link></li> | |
| 8 | - <li role="presentation"><Link to="/login">Log In</Link></li> | |
| 7 | + <LinkContainer to="signup"> | |
| 8 | + <NavItem eventKey={ 1 } href="/signup">Sign Up</NavItem> | |
| 9 | + </LinkContainer> | |
| 10 | + <LinkContainer to="login"> | |
| 11 | + <NavItem eventKey={ 2 } href="/login">Log In</NavItem> | |
| 12 | + </LinkContainer> | |
| 9 | 13 | </Nav> |
| 10 | 14 | ) | ... | ... |
imports/ui/containers/app-navigation.js
| 1 | -import { createContainer } from 'meteor/react-meteor-data'; | |
| 1 | +import { composeWithTracker } from 'react-komposer'; | |
| 2 | 2 | import { AppNavigation } from '../components/app-navigation'; |
| 3 | 3 | |
| 4 | -export default createContainer( ( { params } ) => { | |
| 5 | - return { hasUser: Meteor.user() }; | |
| 6 | -}, AppNavigation ); | |
| 4 | +const composer = ( props, onData ) => { | |
| 5 | + onData( null, { hasUser: Meteor.user() } ); | |
| 6 | +}; | |
| 7 | + | |
| 8 | +export default composeWithTracker( composer, {}, {}, { pure: false } )( AppNavigation ); | ... | ... |
package.json