Comments (11)
Hi, all:
I create a mixin to display loading UI like this:
var NProgress = require('nprogress');
var ProgressMixin = {
componentWillMount: function() {
NProgress.start();
},
componentDidMount: function() {
NProgress.done();
}
};
Then add the mixin to every page:
var Page1 = React.createClass({
mixins: [ProgressMixin],
render: function() {
return (
<div className="Image">
<h1>Page 1</h1>
</div>
);
}
});
It works! When change the link, the loading UI appear.
But I have to add the mixin to every handler, is there any API for adding mixin to all route handlers?
Thanks very much.
from react-router.
or you could use babel es6 decorators if you're working with webpack
create a file decorators/nProgress.jsx:
import NProgress from 'nprogress'
export default function nProgress(target) {
const superComponentWillMount = target.prototype.componentWillMount
const superComponentDidMount = target.prototype.componentDidMount
target.prototype.componentWillMount = function() {
if (typeof superComponentWillMount === 'function')
superComponentWillMount.apply(this, arguments)
NProgress.start()
}
target.prototype.componentDidMount = function() {
if (typeof superComponentDidMount === 'function')
superComponentDidMount.apply(this, arguments)
NProgress.done()
}
}
then simply annotate your components with "nProgress" like so:
import React, { PropTypes, Component } from 'react'
import { Link } from "react-router"
import { Jumbotron } from 'react-bootstrap'
import nProgress from '../decorators/nProgress'
@nProgress
export default class Reports extends Component {
...
from react-router.
Hack-around: the components used as a route handler
being kinda special, anyway, I'm using them as minimal life support around the domain-specific components. The Route
creates the NounPage
, which creates the Noun
.
NounPage
can use its getInitialState
to peek at the store it's passing to Noun
and, if necessary, use the fire
method it's also passing to Noun
to ask the store to start loading the content.
My dispatcher is synchronous, so the store's state will show that it's loading the data by the time Page
hits its own getInitialState
and asks the store for its state.
from react-router.
if I understand you correctly, you want a route handler to display some sort of loading UI while you fetch data?
var SomethingHandler = React.createClass({
getInitialState: function() {
return { loading: true, something: {} };
},
componentDidMount: function() {
someStore.fetch(this.props.params.id, function(something) {
this.setState({ loading: false, something: something });
}.bind(this));
},
render: function() {
if (this.state.loading) {
return <div>loading ...</div>;
}
else {
return <Something something={this.state.something}/>
}
}
});
Am I missing your question?
Edit: s/componentWillMount/componentDidMount/
from react-router.
Also, you can pass props into routes and they'll get sent down to your handlers:
<Route handler={App} store={store}/>
// ...
var App = React.createClass({
componentDidMount: function() {
this.props.store.whatev();
}
});
from react-router.
componentWillMount
makes the most sense. Cheers!
from react-router.
@minwe Hi, i am trying your solution but desnt work. I am writting in ES6, so its little different.
class Print extends React.Component {
constructor(props)
{
super(props);
this.state = {
canvas: null,
mixins: [ProgressMixin],
}
render(){
return(
<canvas className="canvas" ref="canvas" width="895" height="560"></canvas>
)
}
}
and mixin looks same. -
var NProgress = require('nprogress');
var ProgressMixin = {
componentWillMount: function() {
NProgress.start();
},
componentDidMount: function() {
console.log('neco')
NProgress.done();
},
start(){
console.log('bla');
NProgress.start();
},
stop(){
NProgress.done();
}
};
module.exports = ProgressMixin;
But still there is long time to render new page without any loading UI. I am rendering canvas and it takes a lot of time. I tried to get into start method console.log function, but its not invoken. So i think this method isnt called. Any tips ?
from react-router.
Mixins not work with ES6 Class, see https://facebook.github.io/react/docs/reusable-components.html#no-mixins .
You should use createClass
.
from react-router.
@minwe createClass
needs render method, so have i write just emty div ? If yes, it still doesnt work :/ i changed it to -
var ProgressMixin = React.createClass({
componentWillMount: function() {
NProgress.start();
},
componentDidMount: function() {
NProgress.done();
},
start: function(){
NProgress.start();
},
stop: function(){
NProgress.done();
},
render: function(){
return(<div></div>)
}
});
module.exports = ProgressMixin;
from react-router.
Or u think to do remake my component which calls mixins: [ProgressMixin]
?
from react-router.
@roby-rodriguez Please am sorry to ask this, when you mentioned using annotate I am really confused if I might have to set my project to static type(flow) or typescript as it is not working with normal js. I am using CRA and I dont want to eject is there a way I could modify the append to babelrc without ejecting to configure babel for the annotate
from react-router.
Related Issues (20)
- [Docs]: Tutorial missing imports within 'contacts.js'. [ "match-sorter" , "localforage" , "sort-by" ] HOT 1
- [Bug]: history.listen not triggered on hash changes HOT 1
- [Bug]: Update comments recommending to use polyfill.io HOT 3
- [Docs]: Nested Routes are essentially undocumented HOT 5
- [Bug]: unstable_patchRoutesOnMiss is superseded by "*" (404) HOT 3
- [Bug]: unstable_patchRoutesOnMiss leaf ignored when patching sub-trees asyncronously HOT 3
- [Bug]: Functional updates to `useSearchParams` don't get updated values HOT 2
- Update to isbot@5 HOT 1
- [Bug]: `unstable_patchRoutesOnMiss` remote module error-handling HOT 13
- [Bug]: useMatch does not decode params HOT 4
- [Bug]: Could not resolve './utils' from packages/router/index.ts HOT 2
- [Bug]: Link when used with Outlet is not working. It is routing to error page when clicked. HOT 1
- [Bug]: setSearchParams from useSearchParams remove hash HOT 1
- [Bug]: HashRouter need to wrapped twice HOT 1
- [Docs]: docs show reach/router instead of react/router HOT 2
- [Bug]: "react-router-dom-v5-compat" <CompatRouter> doesn't unsubscribe from history potentially causing tests to memory leak HOT 2
- [Bug]: child loader redirect overrides parent loader error HOT 7
- [Bug]: v7_partialHydration with unstable_patchRoutesOnMiss: hydrateFallbackElement not shown on patched routes HOT 3
- [Bug]: Relative path does not work as expected in outlets HOT 1
- [Bug]: useNavigate causes component to rerender HOT 1
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-router.