React-router: active class always set on default route

[theverything]

I have a page where I am using tabs to load different "things" into my component. I am using the Link component to create anchor tags for the tabs. When clicking on the tabs the tab associated with the default route is always active.

The default route shows all of the "things"

Is there any way around this?

<Route handler={Things} name="things" path="/things">
  <DefaultRoute handler={ThingList} /> // <-- this is always active
  <Route handler={ThingList} name="thingsnew" path="new" />
  <Route handler={ThingList} name="thingsactive" path="active" />
</Route>

[mjackson]

Ah, this sounds like a bug.

[ryanflorence]

workaround is to not use DefaultRoute and put the path on it.

<Route handler={Things} name="things" path="/things">
  <Route name="thingsdefault" path="/things" handler={ThingList} /> <!-- <-- will match first -->
  <Route handler={ThingList} name="thingsnew" path="new" />
  <Route handler={ThingList} name="thingsactive" path="active" />
</Route>

[taurose]

Looking at your route config, if you build links like this

<Link to="things">All</Link>
<Link to="thingsnew">New</Link>
<Link to="thingsactive">Active</Link>

I'd expect the first link to always be active when one of the others are, since it's associated with the parent route.

I think you're just missing a name on your default route:

<Route handler={Things} name="things-container" path="/things">
  <DefaultRoute handler={ThingList} name="things" /> 
  <Route handler={ThingList} name="thingsnew" path="new" />
  <Route handler={ThingList} name="thingsactive" path="active" />
</Route>

// a link to "/things" somewhere in your app
// stays active as long as as any type of things (tab) is shown, e.g. for main navigation
<Link to="things-container">Go to things</Link> 

// links for tabs
// only one will be active at a time
<Link to="things">All</Link>
<Link to="thingsnew">New</Link>
<Link to="thingsactive">Active</Link>

[theverything]

@taurose was correct. I needed to add a name to the DefaultRoute. Everything works as expected now. Thank you!

[ryanflorence]

Love it when the users know the router better than the authors.