(React Router) ScrollBehavior not works

[lilee]

render return null and then render the real component, ScrollBehavior not works

[RickWong]

Hmm right. Thanks for reporting this! Any idea how this can be fixed? Easiest way is to set a min-height on your component. But there must be a way to relay the query data for the first render.

[RickWong]

Hey @lilee I've just released version react-transmit@2.2.1 with the new getAllQueries() method. You should be able to transition to a route, injecting all the query results like this:

    onLinkClicked (event) {
        event.preventDefault();

        // Page.getAllQueries() returns a Promise with the query results.
        Page.getAllQueries({count: +1}).then((queryResults) => {
            // When the query results are in, then transition to a route passing
            // queryResults as route params.
            this.context.router.transitionTo("PageRoute", {queryResults});
        });
    },

Let me know whether this solves your issue.

[lilee]

@RickWong Thanks, but it works not well with the bootstrap router handler, like the "Home" handler

[RickWong]

What do you mean by "not well"? Can you perhaps point it out in a few lines of code?

As for the bootstrap Home handler, that one does not need scroll behavior yet, right?

[lilee]

@RickWong goBack() to the Home page need scroll behavior

[RickWong]

@lilee You should be able to implement caching yourself by specifying the onQueryComplete() callback on the Homepage, and remembering the query results in localstorage or a flux-store. Upon going back to Homepage, you populate the Homepage using the remembered data.

react-transmit/src/example/Main.js

Line 61 in 61d3301

<Newsfeed {...{repositoryUrl, stories, onQueryComplete}} />

[lilee]

Thanks, now it works well with the PageCache.

render() {
  var name = this.context.router.getCurrentPath();
  var cache = PageCache.get(name) || {};
  var props = assign({}, this.props || {}, cache, {
    onQueryComplete: this._onQueryComplete.bind(this)
  });
  return <Page {..props} />;
}
// ...

_onQueryComplete(error, result) {
 var name = this.context.router.getCurrentPath();
 if (error) {
   return;
 }
 PageCache.set(name, result);
}

[RickWong]

That's nice! Thanks for reporting back your solution.

[RickWong]

@lilee Note that in react-transmit@2.5.0 I renamed onQueryComplete(error, result) to onQuery(promise) and you get a promise to work with.

https://github.com/RickWong/react-transmit/blob/master/src/example.js#L6-L10