-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
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
Grab active route using react router v4 #4793
Comments
Rendering a In If you would prefer not to use |
Thanks let me try that right now 👍 appreciate the explanation. |
I tried but it is always returning the root path. As you can see when the path is Here is how I'm describing the Routes:
|
By inspecting how In v3 https://github.com/ReactTraining/react-router/blob/v3/modules/isActive.js#L125 and I don't think |
I'm not actually sure where you are logging. Anyways, this is the let active = false
const { router } = this.context
const { path } = this.props
if (path && router) {
const { location } = router
active = matchPath(location.pathname, { path }) != null
}
this.setState({ active }) |
Thanks this works! |
using context is usually not a good idea I am having this problem right now and kinda found a work around . i'll paste some code here . export default () => (
<Router>
<div>
<Route path="/:active?" component={Nav} />
<div className="container">
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</div>
</Router>
) here I am rendering now I can check for <div className="nav navbar-nav" >
<li className={!match || !match.params || !match.params.active ? "active" : ""}><NavLink to="/">Home</NavLink></li>
<li className={match.params.active === 'about' ? "active" : ""}><NavLink to="/about">About</NavLink></li>
<li className={match.params.active === 'notfound' ? "active" : ""}><NavLink to="/notfound">nothing</NavLink></li>
</div> |
Is this relevant to you? See also the implementation: |
First of all, thanks for working on React Router v4. I like the changes applied in the new version, really clean API, really well done.
I work on Grommet, an UX framework that runs on top of ReactJS and supports React Router.
Recently I tried to start our migration to support react router v4. In the past we used to be completely un-opinionated about routing. But recently we added support for React Router inside our Anchor component. We do not use Link or NavLink, we use a prop called
path
to identify when to use React router and when not to use it.React router Anchor:
<Anchor path="/test" icon={<PreviousIcon />} />
Anchor without React Router:
<Anchor href="/test" icon={<PreviousIcon />} />
I'm calling
history.push
andhistory.replace
in a very similar way that React Router<Link />
does.The problem I'm facing with v4 is that
this.context.router.isActive
is completely gone. I tried to find a reason why, or some migration guide, without success. Here is our current implementation of the Anchor that uses React v3:https://github.com/grommet/grommet/blob/master/src/js/components/Anchor.js#L23
Well, I tried looking into the new
<NavLink />
implementation and it seems now things are very JSX-driven. From what I understood from this component it seems that you are declaring a new<Route />
to be able to get a match in the callback. Initially this seems odd to me as I'm not creating a new Route but trying to identify if a given path is active or not.Could you please explain why
router.isActive
is gone and what would be a way to get the active route without using JSX for that?The text was updated successfully, but these errors were encountered: