Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

More generic lazy loading #924

Closed
clearly opened this issue Mar 8, 2015 · 10 comments
Closed

More generic lazy loading #924

clearly opened this issue Mar 8, 2015 · 10 comments

Comments

@clearly
Copy link

clearly commented Mar 8, 2015

Given: https://github.com/rackt/react-router/blob/master/examples/partial-app-loading/app.js

I'm new to react-router and I'm trying to find a way to accomplish this type of lazy loading of component views without having to have the Pre{Component1} and Pre{Component2} class types. I'd like to have one PreClass type and I was trying to accomplish instantiating new instances of that class in the routes definition and each instance derive what exact file to lazy load based on the path for that route instance. I've been banging my head against the wall with no luck thus far. ANY pointers on how to accomplish this would be greatly appreciated.
@agundermann
Copy link
Contributor

There's an open issue about async loading handlers: #755

I think the idea behind the example is to give each route handler the ability to define its own preRender function. Instead of creating one wrapper per route handler, you should also be able to create a function that accepts the bundle callback (from require('bundle!./..):

function createAsyncHandler(bundle) {
  return React.createClass({
    mixins: [ AsyncElement ],
    bundle: bundle,
    preRender: function () {
      return <div>Loading handler...</div>;
    }
  });
}

var routes = <Route handler={createAsyncHandler(require('bundle!./app.js'))}>..</Route>;

You probably want to adjust the preRender output, or pass that as an argument as well.

@ryanflorence
Copy link
Member

this is super high on our priority list, not sure what we'll end up with, but there will be something. For now I like what @taurose has there.

@dnutels
Copy link

dnutels commented Jun 19, 2015

Can you guys perhaps shed some light onto this - the initial example is gone and it's hard to decipher the idea from what is in here (or other threads).

Is there, somewhere, coherent explanation as to what the idea was? So that we can stop writing horrible workarounds.

Thank you.

@agundermann
Copy link
Contributor

Which idea do you mean exactly?

You can find the referenced file here.

As you can see, lazy loading components worked by wrapping each handler in an extra component PreXXX, which would attempt to asynchronously load the actual component after mounting and render something else (like a spinner) in the meanwhile.

OP complained about this approach being too tedious, since every single handler component would require its own wrapper. So I suggested using a generic factory function instead.

In the next version, it seems like you'll be able to simply define an asynchronous getComponents() method on your routes, see http://rackt.github.io/react-router/tags/v1.0.0-beta2.html#Route

@ryanflorence
Copy link
Member

@clearly @dnutels check out the "huge-apps" demo on master, and read this: https://rackt.github.io/react-router/tags/v1.0.0-beta2.html#Advanced%20Usage

ITS SUPER DUPER AWESOME

@dnutels
Copy link

dnutels commented Jun 20, 2015

@taurose @ryanflorence Thank you guys.

The idea I referred to was lazy loading of routes, especially within webpack. I'll give this a try and report back.

@dnutels
Copy link

dnutels commented Jun 20, 2015

Is 1.0.0-beta1/2 supposed to work with React 0.13.3? I get an exception running the example from the docs (the very first one).

react.js:9259

Uncaught TypeError: type.toUpperCase is not a function

@dkingman
Copy link

@dnutels not sure if it's related, but I usually see that error when I forget to export my module via module.exports = ... or in es6 export default ...

@dnutels
Copy link

dnutels commented Jun 21, 2015

Nah, installed 1.0.0-beta2.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>  
    <div data-ui-role="content"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
    <script src="/js/ReactRouter.min.js"></script><!-- Had to take from node_modules -->
    <script src="/js/client.js"></script>
</body>
</html>

JavaScript

'use strict';

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var Link = Router.Link;
var BrowserHistory = require('react-router/lib/BrowserHistory');

var About = React.createClass({
    render: function () {
        return (
            <div>About</div>
        );
    }
});

var Inbox = React.createClass({
    render: function () {
        return (
            <div>Inbox</div>
        );
    }
});

var App = React.createClass({
    render: function () {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>
        );
    }
});

React.render((
    <Router history={BrowserHistory}>
        <Route path="/" component={App}>
            <Route path="about" component={About}/>
            <Route path="inbox" component={Inbox}/>
        </Route>
    </Router>
), document.querySelector('[data-ui-role="content"]'));

I had to take ReactRouter for client from node_modules. May be that's the issue.

Regardless - bundling it with client.js via webpack didn't help either.

@Toomaie
Copy link

Toomaie commented Sep 17, 2015

@dnutels In case someone faces the same problem, you require react-router the wrong way:

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

@lock lock bot locked as resolved and limited conversation to collaborators Jan 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ryanflorence @Toomaie @dkingman @agundermann @clearly @dnutels