How to get current route in react-router 2.0.0-rc5

JavascriptReactjsReact Router

Javascript Problem Overview


I have a router like below:

<Router history={hashHistory}>
	<Route path="/" component={App}>
		<IndexRoute component={Index}/>
		<Route path="login" component={Login}/>
	</Route>
</Router>

Here's what I want to achieve :

  1. Redirect user to /login if not logged in
  2. If user tried to access /login when they are already logged in, redirect them to root /

so now I'm trying to check user's state in App's componentDidMount, then do something like:

if (!user.isLoggedIn) {
    this.context.router.push('login')
} else if(currentRoute == 'login') {
    this.context.router.push('/')
}

The problem here is I can't find the API to get current route.

I found this closed issue suggested using Router.ActiveState mixin and route handlers, but it looks like these two solutions are now deprecated.

Javascript Solutions


Solution 1 - Javascript

After reading some more document, I found the solution:

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

I just need to access the injected property location of the instance of the component like:

var currentLocation = this.props.location.pathname

Solution 2 - Javascript

You can get the current route using

const currentRoute = this.props.routes[this.props.routes.length - 1];

...which gives you access to the props from the lowest-level active <Route ...> component.

Given...

<Route path="childpath" component={ChildComponent} />

currentRoute.path returns 'childpath' and currentRoute.component returns function _class() { ... }.

Solution 3 - Javascript

If you use the history,then Router put everything into the location from the history,such as:

this.props.location.pathname;
this.props.location.query;

get it?

Solution 4 - Javascript

As of version 3.0.0, you can get the current route by calling:

> this.context.router.location.pathname

Sample code is below:

var NavLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    render() {   
        return (
            <Link {...this.props}></Link>
        );
    }
});

Solution 5 - Javascript

For any users having the same issue in 2017, I solved it the following way:

NavBar.contextTypes = {
	router: React.PropTypes.object,
	location: React.PropTypes.object
}

and use it like this:

componentDidMount () {
	console.log(this.context.location.pathname);
}

Solution 6 - Javascript

In App.js add the below code and try

window.location.pathname

Solution 7 - Javascript

You could use the 'isActive' prop like so:

const { router } = this.context;
if (router.isActive('/login')) {
    router.push('/');
}

isActive will return a true or false.

Tested with react-router 2.7

Solution 8 - Javascript

Works for me in the same way:

...
<MyComponent {...this.props}>
  <Route path="path1" name="pname1" component="FirstPath">
  ...
</MyComponent>
...

And then, I can access "this.props.location.pathname" in the MyComponent function.

I forgot that it was I am...))) Following link describes more for make navigation bar etc.: https://stackoverflow.com/questions/42010053/react-router-this-props-location

Solution 9 - Javascript

Try grabbing the path using: document.location.pathname

In Javascript you can the current URL in parts. Check out: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionwxtryView Question on Stackoverflow
Solution 1 - JavascriptwxtryView Answer on Stackoverflow
Solution 2 - JavascriptcolllinView Answer on Stackoverflow
Solution 3 - JavascriptoneView Answer on Stackoverflow
Solution 4 - JavascriptSithuView Answer on Stackoverflow
Solution 5 - JavascriptAotikView Answer on Stackoverflow
Solution 6 - JavascriptTuan NguyenView Answer on Stackoverflow
Solution 7 - JavascriptMarvinVKView Answer on Stackoverflow
Solution 8 - JavascriptAlexView Answer on Stackoverflow
Solution 9 - JavascriptMichael MendozaView Answer on Stackoverflow