React-router: How can I get current route name?

[skuridin]

I want to change one param in current path: this.context.router.transitionTo(currentRouteName, {lang: 'de'}); How can I get currentRouteName?

[kilometers]

https://github.com/rackt/react-router/blob/master/docs/api/RouterContext.md

var currentRouteName = this.context.router.getCurrentPathname();
this.context.router.transitionTo(currentRouteName, {lang: 'de'});

If you want to avoid adding another entry into History (perhaps because you're only changing the language), you can instead use this.context.router.replaceWith(currentRouteName, {lang: 'de'})

[skuridin]

@kilometers I tried this method, but it doesn't work because when you pass two arguments to transitionTo it wants to get route name instead of path as first param. My route name can be home, but path of it - /. Sorry for my English.

[kilometers]

I just ran a test to make sure I'm not crazy (jury's still out), but I did confirm both 'home' and '/' should work for transitionTo's first parameter. Assuming '/' was named 'home', they should both transition to the same route as well.

[skuridin]

@kilometers can you check my code?
My routes:

var routes = (
  <Route name="app" path="/:lang?" handler={AppComponent}>
    <DefaultRoute name="home" handler={HomeComponent}/>
    <Route name="about" handler={AboutComponent}/>
    <NotFoundRoute handler={NotFountComponent}/>
  </Route>
);

Place where I try to change lang:

handleChangeLang: function(e) {
    e.preventDefault();
    var currentPath = this.context.router.getCurrentPathname();
    var currentParams = this.context.router.getCurrentParams();
    if(currentParams.lang == e.currentTarget.lang) return;
    this.context.router.transitionTo(currentPath, {lang: e.currentTarget.lang});
  },

[taurose]

As far as I know transitionTo(path, newParams) is not supported. IIRC, there was some talk about supporting something like transitionToParams(params) where you wouldn't need the name, but I don't think it's implemented.

You can do:

var currentRoutes = this.context.router.getCurrentRoutes();
var activeRouteName = currentRoutes[currentRoutes.length - 1].name;
this.context.router.transitionTo(activeRouteName, ...);

[skuridin]

@taurose thank you! You solution works for me.

[frg]

@taurose This also worked for my use case. Thanks

[mrdulin]

what's now with react-router v2.4.1?

[tomafc330]

Also want to know what the method is for version >2.0 since I don't see that method anymore.

[jbayardo]

this.props.router.transitionTo is still there. However, when used, it seems to be throwing an exception when using substring in line 5 of the following snippet:

        function addQuery(location) {
          if (location.query == null) {
            var search = location.search;

            location.query = parseQueryString(search.substring(1));
            location[SEARCH_BASE_KEY] = { search: search, searchBase: '' };
          }

          // TODO: Instead of all the book-keeping here, this should just strip the
          // stringified query from the search.

          return location;
        }

The exception is:

Uncaught TypeError: search.substring is not a function

[taurose]

router.transitionTo is now internal API; you shouldn't call it directly. Use router.push instead.

The original question doesn't make sense anymore, since the router dropped support for named routes.

[Verikon]

for react-router ^2.4.1; this.props.location.pathname returns a string of the current route.

[anilapu]

I am using reac-router ^2.8.1;
when I use this.props.location.pathname got an error
Uncaught TypeError: Cannot read property 'pathname' of undefined

[tanduong]

@anilapu That required withRouter. See: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md.

[brunoAltinet]

Ok, you get the current route with pathname. But how dou you change a single param of that route?