Git Product home page Git Product logo

Comments (10)

chadpaulson avatar chadpaulson commented on July 3, 2024

Please open an issue on the react-router-component project.

As stated earlier, there are other methods and libraries which could better serve this demo and I plan on a new version of this project with react-router. Feel free to watch the project for updates.

from react-isomorphic-video-game-search.

gaearon avatar gaearon commented on July 3, 2024

If you need any help adjusting scrolling behavior with react-router, ping me, I'll help.

from react-isomorphic-video-game-search.

andre0799 avatar andre0799 commented on July 3, 2024

Hey gaearon, thanks!

What I did was calling this function below as a callback for onNavigation:

handleNavigation function(e){
if (global.scrollTo) {
global.scrollTo(0,0);
}
}

but it doesn't feel very smooth, the page kind blinks when the route changes. Do you know a better solution?

Thank you!

from react-isomorphic-video-game-search.

gaearon avatar gaearon commented on July 3, 2024

I meant with react-router (since it supports scrolling logic and I wrote a part of it). For react-router-component, I don't know a ready solution. (I think it would be implemented like you said, but it's important that scrollTo happens right after new route is rendered.)

from react-isomorphic-video-game-search.

andre0799 avatar andre0799 commented on July 3, 2024

hm I was thinking about migrating from react-router-component to react-router, I'm just not sure how easy that would be.

from react-isomorphic-video-game-search.

andre0799 avatar andre0799 commented on July 3, 2024

and even scrolling up after it renders I still get the blinking effect :/

from react-isomorphic-video-game-search.

andre0799 avatar andre0799 commented on July 3, 2024

In case you can help with the migration, here is my app.jsx code

/** @jsx React.DOM */
'use strict'

var React = require('react/addons')
var Router = require('react-router-component')
var DocumentTitle = require('react-document-title')

var Search = require('./search')
var SearchResults = require('./searchResults')
var Recipe = require('./recipe')
var Home = require('./home')

var Locations = Router.Locations
var Location = Router.Location
var CaptureClicks = require('react-router-component/lib/CaptureClicks')
var Link = require('react-router-component').Link


var App = React.createClass({

  getInitialState: function() {
    if (typeof window === 'undefined') {
      var entryPath = this.props.path
    } else {
      var entryPath = window.location.pathname
    }
    return {
      entryPath: entryPath
    }    
  },

  handleNavigation: function(e){
    console.log('handleNavigation');
    if (global.scrollTo) {
          global.scrollTo(0,0);
        }
  },


  searchRecipes: function(query) {
    this.refs.router.navigate('/search/' + encodeURI(query))
  },

  render: function() {
    return (
      <html>
        <head>
          <title>%react-iso-vgs%</title>
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          <link href='//fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900' rel='stylesheet' type='text/css'/>
          <link href="//fonts.googleapis.com/css?family=Merriweather+Sans:800" rel="stylesheet" type="text/css" />
          <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
          <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
          <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
          <link rel="stylesheet" type="text/css" href="/css/style.css" />
          <script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/2.2.0/picturefill.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        </head>
        <body>
        <Search onSearch={this.searchRecipes} entryPath={this.state.entryPath} />
        <DocumentTitle title="%react-iso-vgs%">
        <CaptureClicks>
          <Locations ref="router" path={this.props.path}  onNavigation={this.handleNavigation}>
            <Location path="/" handler={Home} />
            <Location path="/recipe/:recipe_id/:recipe_slug" handler={Recipe} />
            <Location path="/search/:query" handler={SearchResults} />
          </Locations>
        </CaptureClicks>
        </DocumentTitle>
        <script type="text/javascript" src="/js/behavior.min.js"></script>
        </body>
      </html>
    )
  }

})

module.exports = {
  routes: App,
  title: DocumentTitle
}

// Bootstrap client
if (typeof window !== 'undefined') {
  window.onload = function() {
    React.render(React.createElement(App), document)
  }
}

from react-isomorphic-video-game-search.

chadpaulson avatar chadpaulson commented on July 3, 2024

Migrating to react-router should be fairly straightforward. There are plenty of examples out in the wild. Had the react-router team released their 1.0 API (which borrows many concepts from react-router-component, incidentally) sooner, I wouldn't have used react-router-component.

Either way, I have to get rid of react-async and this project is ready for refactoring. Please hang tight, I promise to make this a priority sometime after React 0.13 is released.

from react-isomorphic-video-game-search.

gaearon avatar gaearon commented on July 3, 2024

There's no 1.0 API because even React 0.13 is changing a lot (e.g. with ES6 classes).
Which doesn't mean you can't use it: there's a nice upgrade guide for each version bump.

from react-isomorphic-video-game-search.

chadpaulson avatar chadpaulson commented on July 3, 2024

Ah, I was under the impression they were calling it 1.0. I'm talking about this release specifically.

from react-isomorphic-video-game-search.

Related Issues (4)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.