kadirahq / flow-router

Carefully Designed Client Side Router for Meteor
MIT License
1.09k stars 194 forks source link

Reactive Update on the URL #512

Closed paulmolluzzo closed 8 years ago

paulmolluzzo commented 8 years ago

I'd like to know if there's a way to update a part of the URL reactively without using FlowRouter.go() while using React and react-layout:

I want to change the value in the document that is used to get the document from the DB. For example, if I have a route like ~/users/:username and update the username field in the document, I then have to user FlowRouter.go('profile', {data}) to direct the user to that new URL. The "old" route is gone.

Below is the working version I have, but there are two issues:

  1. I have to use FlowRouter.go(), which is actually a full page refresh (and going back would be a 404).
  2. I still get errors in the console because for a brief moment the reactive data for the component is actually wrong.

Relevant parts of the component like this:

...
mixins: [ReactMeteorData],

getMeteorData() {
  let data = {};

  let users = Meteor.subscribe('user', {this.props.username});

  if (user.ready())
    data.user = user;

  return data;
}
...

updateName(username) {
  Users.update({_id:this.data.user._id}, {$set:{username}}, null, (e,r) => {
      if (!e)
        FlowRouter.go('profile', {username});
    });
},
...

The route is like this:

FlowRouter.route('/users/:username', {
  name: 'profile'
  action(params) {
    ReactLayout.render(Main, {content: <UserProfile {...params} />});
  }
});

The errors I get are:

Exception from Tracker recompute function:

and

TypeError: Cannot read property '_id' of undefined

Thanks in advance!

paulmolluzzo commented 8 years ago

This is just a question, not a bug/feature so I'm closing this per your contribution docs.

If anyone else finds this, I posted on SO here and hope to get an answer.