React-router: isActive method check for homepage which path is "/"

[yantakus]

How can I check for active homepage route:

<Route path="/" component={Home} />

this.context.router.isActive('/') returns true for any route.

[codepunkt]

Same problem here.

  <Router history={new BrowserHistory}>
    <Route component={App}>
      <Route path="/" component={Shop} />
      <Route path="cart" component={Cart} />
      <Redirect from="*" to="/" />
    </Route>
  </Router>

URL /: Links to / are active.
URL /cart: Links to both / and /cart are active.

[ryanflorence]

Need index routes, I'll write up some docs this week.

[jackmoore]

@ryanflorence I use the IndexRoute component (instead of <Route path="/">), and this is an issue I'm experiencing as well. Not sure if that's what you meant.

[ryanflorence]

I believe #1842 fixes this, in addition to <IndexRoute/> and <IndexLink/> which don't have docs yet.

[codepunkt]

@ryanflorence Whats the difference between an IndexRoute or IndexLink compared to a normal Route or Link?

[ryanflorence]

the docs that I will write today will reveal all :mag:

[janpieterz]

@gonsfx if you're just as curious as I am, this link should give you some insight: https://github.com/rackt/react-router/blob/master/modules/IndexLink.js

The property already works on the npm version.

[codepunkt]

@janpieterz I'm not convinced. Do we really need this?

Shouldn't it be possible to get the desired behaviour by looking at the route tree and their paths alone without having to introduce differente route and link components?

See example at #1441

[janpieterz]

@gonsfx I'm not able to give you any more insight in to if/why we really need this!
@ryanflorence will probably be able!

[jackmoore]

@gonsfx You don't need a different link component, the only thing that IndexLink does is add onlyActiveOnIndex={true} to a regular Link component, which is what I use instead of IndexLink. I'm glad to see this as a option, because there is definitely a need for both behaviors (active on exact, and active on exact + descendent paths). However, the behavior for it still seems buggy.

[codepunkt]

I don't even understand what onlyActiveOnIndex is supposed to say. After all, each Link points to a path so it should be obvious if it is active or not?

[dylantf]

Is there a fix for this if you aren't trying to use the actual <Link>'s active prop? I have a wrapper component that I am using to put an active class on an <li> and I still don't see a way to determine if the current route is active, without it also being true for all of its parent routes, using this.context.history.isActive.

[musbaig]

Running into the same issue as @dyyylan

[mjackson]

@gonsfx The whole idea of "active" doesn't have anything to do with paths/URLs. It's about _routes_. A route is said to be "active" if it is in the current render tree. The onlyActiveOnIndex property restricts a link to being active only if we are at an index route. Try checking out the tests for IndexLink. They should make it very clear how everything works.

@dyyylan @musbaig Sounds like you guys are using Bootstrap. We have discussed this topic ad nauseam in other issues. Please try a search.

[musbaig]

@mjackson don't get me wrong, I think you guys are doing an awesome job with react-router.

I decided to comment only after a lot of searching, since the example discussed here https://github.com/rackt/react-router/blob/master/docs/API.md#isactivepathname-query was not working for IndexLinks as history.isActive always returned true since "/" was always in the render tree.

As a result, although, I'm not using bootstrap, sadly, I am in the same boat as @dyyylan

[mjackson]

@musbaig Could you create a failing test that shows me what you'd like to do, but can't?

[dylantf]

Sorry, disregard this comment. I misremembered what I did.

[dylantf]

@mjackson The onlyActiveOnIndex argument works for my use case, the only case I haven't solved is for the root route "/" which will always be active, and you cannot use the onlyActiveOnIndex argument, since it cannot be an IndexRoute.

In this case a "Home" link will always show as active.

[taion]

Why can't it be an IndexRoute? You just do

<Route path="/" component={Foo}>
  <IndexRoute component={Bar} />
  {/* ... */}
</Route>

[dylantf]

But the top level route cannot, nor can an IndexRoute have children.

[taion]

Can you elaborate? The pattern I have above does in fact work.

[dylantf]

Let's say you have this structure:

<Router>
    <Route path="/" component={App}>
        <IndexRoute component={Home} />

        <Route path="about" component={About}>
            <IndexRoute component={AboutLandingPage} />
            <Route path="foo" component={SomeOtherAboutPage} />
        </Route>
    </Route>
</Router>

If you are at the route /about, and you have a navbar, both the / link (to the home page) and /about link would show as active, even with onlyActiveOnIndex, because you _are_ on an IndexRoute.

[musbaig]

Thanks @dyyylan for the example.
My situation is simpler though, no nested IndexRoutes. Instead, I have the following setup (stripping out requires): https://gist.github.com/musbaig/933dc63f81876735b1df
The problem is here https://gist.github.com/musbaig/933dc63f81876735b1df#file-react-router-index-link-js-L53 where this.history.isActive will return true even if you're on a non-index route, thus, making it difficult to dynamically add styles based on active route. Maybe it's an easy fix and I'm simply missing something.
Thanks again!

[taion]

@dyyylan That's not what onlyActiveOnIndex means. It means it's only active on the index route corresponding to the path you've specified.

[musbaig]

I feel this issue should be reopened as this.history.isActive('/') always returns true even if you're _not_ on an IndexRoute, as demonstrated by the gist I posted earlier.

[taion]

You're aware that isActive takes additional arguments, right? https://github.com/rackt/react-router/blob/v1.0.0-rc3/modules/useRoutes.js#L27

[dylantf]

Yes, you can pass in the additional parameter so that it is only active on an index route. Unfortunately, the "/" index route will always be active if you are on a _different_ index route anywhere in the app.

[taion]

That's simply not correct. I am using this exact pattern on my page right now, and I have an IndexLink to "/" that is, as desired, only active when I am on /.

[dylantf]

I'm not using IndexLink. I'm using history.isActive.

If you are in /some/deep/indexRoute, history.isActive('/', query, true) returns true

This is the expected behavior, since you are on an index route. My point is that it's not really helpful.

[taion]

Do you have an example of this behavior taking place? IndexLink just calls into that logic. I'm looking at my app right now, and I am not seeing the behavior that you describe, when checking whether the root route is active, while on a deeply nested index route.

[musbaig]

@taion actually I was not aware of that additional param, I was going by the docs here https://github.com/rackt/react-router/blob/master/docs/API.md#isactivepathname-query, guess I should've just peeked at the source, my bad. Thank you soo much for that tip!!

[knowbody]

@musbaig I added it to docs https://github.com/rackt/react-router/commit/3a0bd6075cc9e3834d0899a1da1dccdb8fe8298f, thanks!