New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

activeClassName to NavLink properly v4 #4638

Closed
adriantwarog opened this Issue Mar 5, 2017 · 33 comments

Comments

Projects
None yet
@adriantwarog

adriantwarog commented Mar 5, 2017

v4 build 0.7 seems to have had issues on my NavLinks, where the activeClassName is not updating when the url changes.

This simply makes the navigation background not change when a page is changed. If I refresh the entire window, the correct nav is active, however the class name does not seem to be updating.

image

image

<ul>
					<li>
						<NavLink to="/" exact activeClassName="active" ><span className="fa fa-home"></span>
						<span className="title">Home</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/search" activeClassName="active"><span className="fa fa-search"></span>
							<span className="title">Search</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/fav" activeClassName="active"><span className="fa fa-star"></span>
						<span className="title">Favourites</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/history" activeClassName="active"><span className="fa fa-history"></span>
						<span className="title">History</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/admin" activeClassName="active"><span className="fa fa-cogs"></span>
						<span className="title">Admin</span>
						</NavLink>
					</li>
				</ul>

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 5, 2017

Collaborator

Are you using a component that implements shouldComponentUpdate between your router an d your navlinks?

Collaborator

pshrmn commented Mar 5, 2017

Are you using a component that implements shouldComponentUpdate between your router an d your navlinks?

@adriantwarog

This comment has been minimized.

Show comment
Hide comment
@adriantwarog

adriantwarog Mar 5, 2017

No just a standard component with links

import { NavLink } from 'react-router-dom';
import './Nav.scss'

class Nav extends Component {
	
	render() {
		return (
			<nav>
				<ul>
					<li>
						<NavLink to="/" exact activeClassName="active" ><span className="fa fa-home"></span>
						<span className="title">Home</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/search" activeClassName="active"><span className="fa fa-search"></span>
							<span className="title">Search</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/fav" activeClassName="active"><span className="fa fa-star"></span>
						<span className="title">Favourites</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/history" activeClassName="active"><span className="fa fa-history"></span>
						<span className="title">History</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/admin" activeClassName="active"><span className="fa fa-cogs"></span>
						<span className="title">Admin</span>
						</NavLink>
					</li>
				</ul>
			</nav>
		);
	}
}

export default Nav;````

adriantwarog commented Mar 5, 2017

No just a standard component with links

import { NavLink } from 'react-router-dom';
import './Nav.scss'

class Nav extends Component {
	
	render() {
		return (
			<nav>
				<ul>
					<li>
						<NavLink to="/" exact activeClassName="active" ><span className="fa fa-home"></span>
						<span className="title">Home</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/search" activeClassName="active"><span className="fa fa-search"></span>
							<span className="title">Search</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/fav" activeClassName="active"><span className="fa fa-star"></span>
						<span className="title">Favourites</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/history" activeClassName="active"><span className="fa fa-history"></span>
						<span className="title">History</span>
						</NavLink>
					</li>
					<li>
						<NavLink to="/admin" activeClassName="active"><span className="fa fa-cogs"></span>
						<span className="title">Admin</span>
						</NavLink>
					</li>
				</ul>
			</nav>
		);
	}
}

export default Nav;````
@zaynv

This comment has been minimized.

Show comment
Hide comment
@zaynv

zaynv Mar 5, 2017

I think this might be related - I'm also having an issue when the build went from 0.6 to 0.7. When I click on a NavLink, the URL changes in top bar, but the components dont switch at all. This is without any code changes, it just seems to be an issue when I switch versions. My Nav is similar to the one above.

zaynv commented Mar 5, 2017

I think this might be related - I'm also having an issue when the build went from 0.6 to 0.7. When I click on a NavLink, the URL changes in top bar, but the components dont switch at all. This is without any code changes, it just seems to be an issue when I switch versions. My Nav is similar to the one above.

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 5, 2017

Collaborator

Can you verify that the <NavLink>s are re-rendering? Even if you aren't calling sCU directly, you might have third-party code that is calling it (like connect or observable).

Collaborator

pshrmn commented Mar 5, 2017

Can you verify that the <NavLink>s are re-rendering? Even if you aren't calling sCU directly, you might have third-party code that is calling it (like connect or observable).

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 5, 2017

Collaborator

I put together a simple codepen where this is working.

Collaborator

pshrmn commented Mar 5, 2017

I put together a simple codepen where this is working.

@adriantwarog

This comment has been minimized.

Show comment
Hide comment
@adriantwarog

adriantwarog Mar 6, 2017

I am running the parent component in a mobx decorator. It calls the Nav. Not sure if that has an effect

import React, {Component} from 'react';
import './Header.scss';

import { Link } from 'react-router-dom';
import { observer } from "mobx-react"

import Nav from './Nav';
import User from './User';
import logo from '../logo.png'

@observer
class Header extends Component {
	render() {
		return (
			<header>
				<div className="loader" />
				<Link to="/" className="logo-container">
					<div className="logo" style={{ backgroundImage: `url(${logo})`}} />
					<div className="tagline">
						<div className="title">
							<span>GP</span>book</div>
						<div className="desc">Referrals made quick and easy</div>
					</div>

				</Link>
				<Nav />
				<User />
			</header>
		);
	}
}

export default Header;

My Root component is also wrapped in an observer

@observer
class App extends Component {
	render() {
		return (
			<Provider store={store}>
				<Router>
					<div>
						{store.user ? <div>
							<Header />
							<Route path="/" exact component={Home} />
							<Route path="/search" component={Search} />
							<Route path="/profile" component={Profile} />
							<Route path="/admin" component={Admin} />
						</div> : <Login />}

					</div>		
				</Router>
			</Provider>
		);
	}
}

adriantwarog commented Mar 6, 2017

I am running the parent component in a mobx decorator. It calls the Nav. Not sure if that has an effect

import React, {Component} from 'react';
import './Header.scss';

import { Link } from 'react-router-dom';
import { observer } from "mobx-react"

import Nav from './Nav';
import User from './User';
import logo from '../logo.png'

@observer
class Header extends Component {
	render() {
		return (
			<header>
				<div className="loader" />
				<Link to="/" className="logo-container">
					<div className="logo" style={{ backgroundImage: `url(${logo})`}} />
					<div className="tagline">
						<div className="title">
							<span>GP</span>book</div>
						<div className="desc">Referrals made quick and easy</div>
					</div>

				</Link>
				<Nav />
				<User />
			</header>
		);
	}
}

export default Header;

My Root component is also wrapped in an observer

@observer
class App extends Component {
	render() {
		return (
			<Provider store={store}>
				<Router>
					<div>
						{store.user ? <div>
							<Header />
							<Route path="/" exact component={Home} />
							<Route path="/search" component={Search} />
							<Route path="/profile" component={Profile} />
							<Route path="/admin" component={Admin} />
						</div> : <Login />}

					</div>		
				</Router>
			</Provider>
		);
	}
}
@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 6, 2017

Collaborator

Yes. observer calls shouldComponentUpdate. Only observers that are children of the <Router> will need to pass the location prop.

Collaborator

pshrmn commented Mar 6, 2017

Yes. observer calls shouldComponentUpdate. Only observers that are children of the <Router> will need to pass the location prop.

@nzjoel1234

This comment has been minimized.

Show comment
Hide comment
@nzjoel1234

nzjoel1234 Mar 6, 2017

I also had the same issue when I tried upgrading to beta 7. Any routes withing a component which was using the react-redux connect HOC (which implements shouldComponentUpdate) would not update.

Is the long term solution to this going to be passing the location prop or is this just a temporary work-around until this gets solved?

nzjoel1234 commented Mar 6, 2017

I also had the same issue when I tried upgrading to beta 7. Any routes withing a component which was using the react-redux connect HOC (which implements shouldComponentUpdate) would not update.

Is the long term solution to this going to be passing the location prop or is this just a temporary work-around until this gets solved?

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 6, 2017

Collaborator

@nzjoel1234 Any sCU call should return true when the location changes. Passing the location as a prop will do this, but it already isn't an issue if other props are changing (e.g. you are passing in product props from the store in your mapStateToProps based on a URL param). There are also plans to remove sCU from react-redux. If you really don't want to use a location prop, you can pass the { pure: false } option to connect.

Collaborator

pshrmn commented Mar 6, 2017

@nzjoel1234 Any sCU call should return true when the location changes. Passing the location as a prop will do this, but it already isn't an issue if other props are changing (e.g. you are passing in product props from the store in your mapStateToProps based on a URL param). There are also plans to remove sCU from react-redux. If you really don't want to use a location prop, you can pass the { pure: false } option to connect.

@timdorr timdorr closed this Mar 7, 2017

@adriantwarog

This comment has been minimized.

Show comment
Hide comment
@adriantwarog

adriantwarog Mar 8, 2017

As mentioned before, is this a temporary change, or long term, as it was quite intuitive that NavLink would automatically update itself regardless pre-beta7? This means each time I create a NavLink now, I will need to make sure its additionally passes a location prop all the way down the components, (depending on how deep it is).

adriantwarog commented Mar 8, 2017

As mentioned before, is this a temporary change, or long term, as it was quite intuitive that NavLink would automatically update itself regardless pre-beta7? This means each time I create a NavLink now, I will need to make sure its additionally passes a location prop all the way down the components, (depending on how deep it is).

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 8, 2017

Collaborator

Your <NavLink> doesn't need to be passed the location. It is whatever component is calling sCU that needs the location so that it knows that it should allow a re-render when the current and next location props are different.

Collaborator

pshrmn commented Mar 8, 2017

Your <NavLink> doesn't need to be passed the location. It is whatever component is calling sCU that needs the location so that it knows that it should allow a re-render when the current and next location props are different.

@adriantwarog

This comment has been minimized.

Show comment
Hide comment
@adriantwarog

adriantwarog Mar 8, 2017

I apologies to ask again, but I just want to be a bit more clear.

In my example above, the root App component calls the Header, which calls the Nav. I am unsure where I am getting this location prop from, and am I passing it from App > Header to Nav, and never even using it?

I previously felt comfortable knowing that no matter where I place a Link (now NavLink) as long as the to=url, isActive would work, and automatically update activeClassName. However now I can't get head around what is happening differently, before and now, as to those automatic updates no longer happening and now a manual process. I would much rather re-create a new NavLink component which worked as it previously did.

adriantwarog commented Mar 8, 2017

I apologies to ask again, but I just want to be a bit more clear.

In my example above, the root App component calls the Header, which calls the Nav. I am unsure where I am getting this location prop from, and am I passing it from App > Header to Nav, and never even using it?

I previously felt comfortable knowing that no matter where I place a Link (now NavLink) as long as the to=url, isActive would work, and automatically update activeClassName. However now I can't get head around what is happening differently, before and now, as to those automatic updates no longer happening and now a manual process. I would much rather re-create a new NavLink component which worked as it previously did.

@pshrmn

This comment has been minimized.

Show comment
Hide comment
@pshrmn

pshrmn Mar 8, 2017

Collaborator

Pretend for a minute that context does not exist. If that is the case, then the only way to pass routing information to children components would be through props. Each child would receive the current location as well as other props from its parent.

If that were the case, then a component that implements shouldComponentUpdate (returning true if a shallow check of its props shows that at least one of them updated) would re-render whenever the location prop changes. That is how mobx-react's observer implements sCU.

Back to reality, where context does exist as a way to pass state. You navigate, the location object changes, and the above component that implements sCU runs. However, now that location is part of the context, sCU does not detect that the location object is different and it returns false, preventing it and its children from updating. When this is happening we do want to update, the problem is just that there isn't a good way for sCU to detect this (at least when using third-party components).

The solution is thus to pass the location as a prop to the component that implements sCU.

You can read more about this and how to access the location in the dealing with updating blocking guide.

Collaborator

pshrmn commented Mar 8, 2017

Pretend for a minute that context does not exist. If that is the case, then the only way to pass routing information to children components would be through props. Each child would receive the current location as well as other props from its parent.

If that were the case, then a component that implements shouldComponentUpdate (returning true if a shallow check of its props shows that at least one of them updated) would re-render whenever the location prop changes. That is how mobx-react's observer implements sCU.

Back to reality, where context does exist as a way to pass state. You navigate, the location object changes, and the above component that implements sCU runs. However, now that location is part of the context, sCU does not detect that the location object is different and it returns false, preventing it and its children from updating. When this is happening we do want to update, the problem is just that there isn't a good way for sCU to detect this (at least when using third-party components).

The solution is thus to pass the location as a prop to the component that implements sCU.

You can read more about this and how to access the location in the dealing with updating blocking guide.

@nzjoel1234

This comment has been minimized.

Show comment
Hide comment
@nzjoel1234

nzjoel1234 Apr 2, 2017

@pshrmn Since most people who will get this issue are using either Redux of Mobx would it be possible for react router to allow some type of middleware which could be used to provide a way of sharing state instead of using context?

So on history.onChange react router could call something like middleware.setNewLocation(location) if no custom middleware was provided then this would update the context otherwise some custom middleware could store the new location in Redux state for example. Then the withRouter HOC could retrieve location etc. from the middleware, and Links etc. could also use withRouter to get their props?

Hope this makes sense?

nzjoel1234 commented Apr 2, 2017

@pshrmn Since most people who will get this issue are using either Redux of Mobx would it be possible for react router to allow some type of middleware which could be used to provide a way of sharing state instead of using context?

So on history.onChange react router could call something like middleware.setNewLocation(location) if no custom middleware was provided then this would update the context otherwise some custom middleware could store the new location in Redux state for example. Then the withRouter HOC could retrieve location etc. from the middleware, and Links etc. could also use withRouter to get their props?

Hope this makes sense?

@crysfel

This comment has been minimized.

Show comment
Hide comment
@crysfel

crysfel Apr 27, 2017

Interesting... I found this issue with my NavBar component. I'm using redux, but I don't have any connect between the router and the NavLinks. The problem I had, it was because I was extending from PureComponent

class NavBar extends PureComponent {
   //...
}

By changing to Component the active class started working.

class NavBar extends Component {
   // ...
}

crysfel commented Apr 27, 2017

Interesting... I found this issue with my NavBar component. I'm using redux, but I don't have any connect between the router and the NavLinks. The problem I had, it was because I was extending from PureComponent

class NavBar extends PureComponent {
   //...
}

By changing to Component the active class started working.

class NavBar extends Component {
   // ...
}
@timdorr

This comment has been minimized.

Show comment
Hide comment
@timdorr

timdorr Apr 27, 2017

Collaborator

That's because the PureComponent blocks the update to the components underneath it: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Collaborator

timdorr commented Apr 27, 2017

That's because the PureComponent blocks the update to the components underneath it: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

@zaynv

This comment has been minimized.

Show comment
Hide comment
@zaynv

zaynv Apr 29, 2017

I fixed my own problem awhile ago, but this was indeed the issue with me (I was using redux-form. Passing the Form component the location prop made things work again. Thanks for the great docs!

zaynv commented Apr 29, 2017

I fixed my own problem awhile ago, but this was indeed the issue with me (I was using redux-form. Passing the Form component the location prop made things work again. Thanks for the great docs!

@ryanhomer

This comment has been minimized.

Show comment
Hide comment
@ryanhomer

ryanhomer May 19, 2017

I had to add a pathname property to the component in which I was using the NavLink and make sure it was getting the current pathname from the location property passed down by the Route component. This causes the component to re-render when the pathname changes (even if you are not directly using the pathname property) and allows the NavLink component to update.

ryanhomer commented May 19, 2017

I had to add a pathname property to the component in which I was using the NavLink and make sure it was getting the current pathname from the location property passed down by the Route component. This causes the component to re-render when the pathname changes (even if you are not directly using the pathname property) and allows the NavLink component to update.

@PDS42

This comment has been minimized.

Show comment
Hide comment
@PDS42

PDS42 May 30, 2017

I'm on v4.1.1 of react-router and react-router-dom, and getting the same issue. If I got all the above right, I should look for a way to let NavLink know that it should update and render again.

I have a class class MenuListItem extends Component {...}, and inside multiple elements, including <NavLink strict={true} to={this.props.url} className={${styles.container} ${styles.link}} activeClassName={styles.linkActive}>.

I do not know how to proceed, I tried using context but did not do much for me. Any suggestions ?

@ryanhomer I've tried your solution, added pathname prop (passing this.props.location.pathname) to my MenuListItem component, and it changed nothing. Is there any step you did not detail in your explanation that can make it work for me ?

PDS42 commented May 30, 2017

I'm on v4.1.1 of react-router and react-router-dom, and getting the same issue. If I got all the above right, I should look for a way to let NavLink know that it should update and render again.

I have a class class MenuListItem extends Component {...}, and inside multiple elements, including <NavLink strict={true} to={this.props.url} className={${styles.container} ${styles.link}} activeClassName={styles.linkActive}>.

I do not know how to proceed, I tried using context but did not do much for me. Any suggestions ?

@ryanhomer I've tried your solution, added pathname prop (passing this.props.location.pathname) to my MenuListItem component, and it changed nothing. Is there any step you did not detail in your explanation that can make it work for me ?

@ryanhomer

This comment has been minimized.

Show comment
Hide comment
@ryanhomer

ryanhomer May 30, 2017

@PDS42 No, that's all I had to do. However, as an alternative and cleaner solution, I ended up wrapping my components using withRouter. In my case, I have a main component in which the routing takes place and which renders Component1 which in turn renders Component2. I had to wrap both Component1 and Component2 in order for the re-render to work. So, something like this.

import { withRouter } from 'react-router-dom';

class Component1 extends React.Component { render() {} };

Component1 = withRouter(Component1);
export default Component1;

Hope this helps.

ryanhomer commented May 30, 2017

@PDS42 No, that's all I had to do. However, as an alternative and cleaner solution, I ended up wrapping my components using withRouter. In my case, I have a main component in which the routing takes place and which renders Component1 which in turn renders Component2. I had to wrap both Component1 and Component2 in order for the re-render to work. So, something like this.

import { withRouter } from 'react-router-dom';

class Component1 extends React.Component { render() {} };

Component1 = withRouter(Component1);
export default Component1;

Hope this helps.

@PDS42

This comment has been minimized.

Show comment
Hide comment
@PDS42

PDS42 May 31, 2017

Unfortunately I already did that, and it did not help (pretty sure you cannot pass the location prop without withRouter anyway?). If you think of anything else please let me know! Thank you for taking the time.

PDS42 commented May 31, 2017

Unfortunately I already did that, and it did not help (pretty sure you cannot pass the location prop without withRouter anyway?). If you think of anything else please let me know! Thank you for taking the time.

@stas-dolgachov

This comment has been minimized.

Show comment
Hide comment
@stas-dolgachov

stas-dolgachov May 31, 2017

I had the same issue with router, but solution proposed by @ryanhomer helped (wrap component with "withRouter ")
How it works for me:
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CategoriesMenu));
CategoriesMenu - contains other components with NavLinks and activeClassName

Thank you, sir! 👍

stas-dolgachov commented May 31, 2017

I had the same issue with router, but solution proposed by @ryanhomer helped (wrap component with "withRouter ")
How it works for me:
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CategoriesMenu));
CategoriesMenu - contains other components with NavLinks and activeClassName

Thank you, sir! 👍

@ryanhomer

This comment has been minimized.

Show comment
Hide comment
@ryanhomer

ryanhomer Jun 2, 2017

@PDS42 If you are using withRouter and connect together, it has to be done like how @stas-dolgachov did it, withRouter wrapping connect.

ryanhomer commented Jun 2, 2017

@PDS42 If you are using withRouter and connect together, it has to be done like how @stas-dolgachov did it, withRouter wrapping connect.

@PDS42

This comment has been minimized.

Show comment
Hide comment
@PDS42

PDS42 Jun 12, 2017

@ryanhomer I just realized I actually did not wrap the parent component, but just the one with the in it! For next references, wrapping only the parent with withRouter did the trick for me. Thank you! :)

PDS42 commented Jun 12, 2017

@ryanhomer I just realized I actually did not wrap the parent component, but just the one with the in it! For next references, wrapping only the parent with withRouter did the trick for me. Thank you! :)

@ReactTraining ReactTraining deleted a comment from Vinlock Jul 5, 2017

@scoutrul

This comment has been minimized.

Show comment
Hide comment
@scoutrul

scoutrul Sep 22, 2017

I had the same and wrapping my App component into withRouter did help.

scoutrul commented Sep 22, 2017

I had the same and wrapping my App component into withRouter did help.

@TechyTimo

This comment has been minimized.

Show comment
Hide comment
@TechyTimo

TechyTimo Oct 13, 2017

Same here. Just wrapped the parent component withRouter and it worked.

TechyTimo commented Oct 13, 2017

Same here. Just wrapped the parent component withRouter and it worked.

@rokit

This comment has been minimized.

Show comment
Hide comment
@rokit

rokit Oct 17, 2017

I was having this problem and my entire App was already wrapped using withRouter. I'm also using Redux. I noticed that it would style the correct link if I manually refreshed the page on any given route which made me think of mapping router to props to trigger an update:

const mapStateToProps = (state) => {
	return {
		router: state.router,
	}
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)

I'm not actually using router anywhere in my component, but just adding that in made the active style work.

rokit commented Oct 17, 2017

I was having this problem and my entire App was already wrapped using withRouter. I'm also using Redux. I noticed that it would style the correct link if I manually refreshed the page on any given route which made me think of mapping router to props to trigger an update:

const mapStateToProps = (state) => {
	return {
		router: state.router,
	}
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)

I'm not actually using router anywhere in my component, but just adding that in made the active style work.

@JustFly1984

This comment has been minimized.

Show comment
Hide comment
@JustFly1984

JustFly1984 Oct 18, 2017

JustFly1984 commented Oct 18, 2017

@44db

This comment has been minimized.

Show comment
Hide comment
@44db

44db Nov 8, 2017

As @zaynv mentioned, passing the location as a prop to the component holding the NavLink will make active class work again.
In my case I had to get location using withRouter:

class App extends React.Component{
	render() {
		const { location } = this.props
		return(
			<div id="AppWrap">
				<Navigation location={location}/>
				<Route exact path="/" component={Home}/>				
			</div>)
	}
}

export default withRouter(App)

and then in the Navigation component where it holds the NavLinks simply started setting active classes again.

44db commented Nov 8, 2017

As @zaynv mentioned, passing the location as a prop to the component holding the NavLink will make active class work again.
In my case I had to get location using withRouter:

class App extends React.Component{
	render() {
		const { location } = this.props
		return(
			<div id="AppWrap">
				<Navigation location={location}/>
				<Route exact path="/" component={Home}/>				
			</div>)
	}
}

export default withRouter(App)

and then in the Navigation component where it holds the NavLinks simply started setting active classes again.

@themre

This comment has been minimized.

Show comment
Hide comment
@themre

themre Dec 20, 2017

I setup codesandbox demo and I can't get active links to work: https://codesandbox.io/s/m36091p4yp

themre commented Dec 20, 2017

I setup codesandbox demo and I can't get active links to work: https://codesandbox.io/s/m36091p4yp

@Ancinek

This comment has been minimized.

Show comment
Hide comment
@Ancinek

Ancinek Jan 14, 2018

Damn, weird. The solutions work in one of my apps, but don't in other. Weird 😞

Ancinek commented Jan 14, 2018

Damn, weird. The solutions work in one of my apps, but don't in other. Weird 😞

@lgerndt

This comment has been minimized.

Show comment
Hide comment
@lgerndt

lgerndt Jan 25, 2018

@stas-dolgachov 's answer worked for me (whew!). I now have much smaller problem, hopefully someone here can jumpstart me. My export is using compose:

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  withStyles(styles, { name: 'App' }),
  withTheme(),
)(Header);

How can rewrite this to have the "withRouter" in the right place? I am weary, begging a handout :)

lgerndt commented Jan 25, 2018

@stas-dolgachov 's answer worked for me (whew!). I now have much smaller problem, hopefully someone here can jumpstart me. My export is using compose:

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  withStyles(styles, { name: 'App' }),
  withTheme(),
)(Header);

How can rewrite this to have the "withRouter" in the right place? I am weary, begging a handout :)

@PDS42

This comment has been minimized.

Show comment
Hide comment
@PDS42

PDS42 Jan 26, 2018

@lgerndt pretty sure you just have to do this:

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps),
  withStyles(styles, { name: 'App' }),
  withTheme(),
)(Header);

Let me know if that worked!

PDS42 commented Jan 26, 2018

@lgerndt pretty sure you just have to do this:

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps),
  withStyles(styles, { name: 'App' }),
  withTheme(),
)(Header);

Let me know if that worked!

@lock lock bot locked as resolved and limited conversation to collaborators Jun 5, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.