Change URL without triggering re-route

[johnthedebs]

I'm trying to implement a gallery that behaves like Instagram's, but I'm having trouble due to the fact that I can't change the URL without triggering a full re-route.

What I'd like to be able to do is open a modal from an image gallery and change the URL such that copying/pasting the URL results in displaying just that image and not the gallery behind it.

In other words, I have a set of routes that looks like this:

<Routes location="history">
    <Route name="index" path="/" handler={App}>
        <Route name="featuredGallery" path="/items/featured/" handler={FeaturedGallery} />
        <Route name="itemDetail" path="/items/:id/" handler={ItemDetail} />
        <DefaultRoute handler={Homepage} />
    </Route>
</Routes>

And I'd like to be able to visit /items/featured/ and click an item to open a modal that changes the URL to, eg, /items/10/?modal=true without triggering the ItemDetail handler (I will render it inside the modal in FeaturedGallery when an item in the gallery is clicked).

However, if /items/10/?modal=true were to be pasted into a new browser window, it should trigger the ItemDetail handler rather than FeaturedGallery.

If there's a way to do this already, I haven't been able to figure it out. Any help is appreciated!

[mjackson]

Navigating from /items/10/ to /items/10/?modal=true shouldn't trigger a transition AFAICT.

@rpflorence Would addHandlerKey help here?

[ryanflorence]

hmm, maybe I misread this issue? As I understand it, the request is to:

1. be at /items/featured
2. click a link
3. change the url to /items/10/?modal=true
4. not actually transition away from /items/featured

And no, you can't do this, nor do I think you should do this. /items/featured?modal_item_id=12 and then reuse the ItemDetail component inside of FeaturedGallery.

You don't need to share URLs between routes to re-use the route handler.

[ryanflorence]

Also ... I wouldn't reuse the route handler, I'd have both FeaturedGallery and ItemDetail both use some non-route handler component like ItemDetailView or whatever.

[ryanflorence]

var FeaturedGallery = React.createClass({
  render: function() {
    var modal;
    if (this.props.query.modalItemId)
      modal = <Modal><ItemDetailView id={this.props.query.modalItemId}/></Modal>
    // ...
  }
});

var ItemDetailHandler = React.createClass({
  render: function() {
    return <ItemDetailView id={this.props.params.modalItemId}/>
  }
});

[johnthedebs]

@rpflorence Yeah, your description is correct. I'm trying to get the same behavior as this page (http://instagram.com/johnthedebs) so that when you copy/paste a link with one of the modals open it takes you directly to that image (and only that image, with no gallery underneath).

I figured there may have been a design decision not to support that type of behavior since it seems to complicate things. If that's the case, I'll try to figure something else out. Thanks for the quick replies!

[ryanflorence]

Why do you want the same url to have two different states?

On Fri, Sep 5, 2014 at 12:32 PM, John Debs notifications@github.com wrote:

I'm trying to implement a gallery that behaves like Instagram's, but I'm
having trouble due to the fact that I can't change the URL without
triggering a full re-route.

What I'd like to be able to do is open a modal from an image gallery and
change the URL such that copying/pasting the URL results in displaying just
that image and not the gallery behind it.

In other words, I have a set of routes that looks like this:

And I'd like to be able to visit /items/featured/ and click an item to
open a modal that changes the URL to, eg, /items/10/?modal=true without
triggering the ItemDetail handler (I will render it inside the modal in
FeaturedGallery).

However, if /items/10/?modal=true were to be pasted into a new browser
window, it should trigger the ItemDetail handler rather than
FeaturedGallery.

If there's a way to do this already, I haven't been able to figure it out.
Any help is appreciated!

—
Reply to this email directly or view it on GitHub
#266.

[flux627]

I think @johnthedebs wants to have a single URL have two different states for the same reason Instagram does-- when users share direct URLs to a page with an active modal, it makes more sense to send them to a page that has just the modal's contents. This is something that Facebook does as well.

I also can think of other situations involving different user states, eg. whether a user is logged in or not, whether a user is an admin or not, etc...

[ryanflorence]

it makes more sense to send them to a page that has just the modal's contents.

In this router, a url represents an application state. Every feature is centered around this concept. If a visitor refreshes or shares a url, we will show the same thing--every time.

With all that said, you could store if this is the first render or not.

var isFirstRender = true;

var FeaturedGallery = React.createClass({
  statics: {
    willTransitionTo: function(transition, params, query) {
      if (isFirstRender && query.modalItem)
        transition.redirect('itemDetail', params, query);
      isFirstRender = false;
    }
  }
});

And the URLs would need to change, but they arguably make more sense:

/items/featured?modalItem=12
/items/12

If the visitor lands at /items/featured?modalItem=12 they will be redirected to /items/12, but if they navigate to it then the featured items remain in the background and the URL just gets the new query param.

This way your URLs have a single application state, but you still get the user experience you want.

[johnthedebs]

@rpflorence Thanks for the suggestion to keep track of the first render and redirecting, that satisfies the use case for me. Closing the issue since I don't think there's anything more to discuss.

[adcooley]

hey guys, I'm trying to accomplish this exact thing, but since the issue is two years old I'm not surprised I'm having trouble solving it the same way. I added the static willTransitionTo method and am having no luck with it getting called. Should I be using the onEnter hook instead? If so, how can I determine whether it's a first render or not?

Any help is appreciated!

[flux627]

I'd recommend opening a new issue with your exact use-case, I think that would have a higher probability for finding the help you need.

[adcooley]

@flux627 thanks for the tip. I ended up using onEnter (it appears that is only called on first render) so I'm all set!

[flux627]

@adcooley, so you were able to accomplish what was described by the OP?