React-router: Replacing query string without knowledge of other url components

[nhunzaker]

Is there a good way at the moment to replace a query string parameter without prior knowledge of other URL properties? Ideally, I'd love to be able to do something like:

Router.mergeQuery({ filter: 'value' })

Thoughts?

[ryanflorence]

Is merge(this.props.query, {filter: 'value'}); so bad?

[nhunzaker]

Not bad at all. That's what I'm currently doing. I actually think #157 addresses might address most of my issue: having to pass around the route name and parameters.

[ryanflorence]

we've talked about having something like what you've described, it does feel like there's something to be done to make persisting/manpulating the query string less work, but so far it doesn't seem to cumbersome to just pass it to Links

[simenbrekken]

Hi, I'd hate to bring up #221 again but we're struggling with this issue since our URLs are absolute and don't necessarily map directly to a named route.

When viewing an URL such as /foo/bar/very/long/url and we'd like to open a dialog we currently do:

var PathStore = require('react-router/modules/stores/PathStore')

Router.transitionTo(PathStore.getCurrentPath(), null, query)

And to close it:

var PathStore = require('react-router/modules/stores/PathStore')
var Path = require('react-router/modules/utils/Path')

Router.transitionTo(Path.withoutQuery(PathStore.getCurrentPath()))

It would be really nice with one of two things:

1. Router.getCurrentPath()
2. Router.transitionTo(null, null, {dialog: 'bar'})

[whather]

+1 on being able to do Router.transitionTo(null, null, {dialog: 'bar'})

Any updates on this? I have the same problem.

[uberllama]

Just ran into the same thing. I have a data table mixin that handles sorting, and I need to change the query string without having knowledge of the current route (or, alternately, being able to access the current route name so I can assemble a link).

var DataTableMixin = {
  queryState: {},

  handleSort: function(attr) {
    // ... figure out sort and direction
    this.queryState = _.extend(this.queryState, { sort: attr, direction: direction, page: 1 });
    this.replaceWith('posts', {}, this.queryState);
  }
}

In the example above, I would like to be able to say this.replaceWith(this.queryState), this.replaceWith(this.props.routeName, {}, this.queryState) or the like. Otherwise I'm forced to explicitly pass my mixin the name of my route for the including component, which is fragile and gross.

[gaearon]

You can access route name from Router.State mixin via something like _.last(this.getRoutes()).name.
I agree it's not ideal but doable:

    var routeName = _.last(this.getRoutes()).name,
        params = this.getParams(),
        query = this.getQuery();

    query = Object.assign({}, query, {
      sort: 'something'
    });

    this.replaceWith(routeName, params, query);

[uberllama]

Thanks Dan, that'll do the trick. Maybe I need to delve into the code and submit more doc PRs :)

[gaearon]

I'm sure that will be appreciated!

[NgKhanh]

I'm using browserHistory to navigate in my app like "foo/:id?q=bar"
That's ok on ContainerComponent where I can access this.props.location.pathname
<Button onClick={()=>browserHistory.push(this.props.location.pathname+ '?q=bar')}>

But on children component which hasn't props.location, it's complicate, like that
<Button onClick={()=>browserHistory.push('foo/' + this.props.fooId+ '?' + this.props.bar)}>

Any solution to append query to current pathname, as
browserHistory.appendQuery({'q':'bar'})