Comments (10)
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.
If you need any help adjusting scrolling behavior with react-router, ping me, I'll help.
from react-isomorphic-video-game-search.
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.
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.
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.
and even scrolling up after it renders I still get the blinking effect :/
from react-isomorphic-video-game-search.
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.
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-isomorphic-video-game-search.