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]: Switched parameters in matchPath HOT 1
- [Bug]: Unable to match a url that ends in an equal sign HOT 1
- [Bug]: optional segments with dynamic segments HOT 1
- [Bug]: State is not preserved in a component tree when switching to render via custom `<Routes location={location}>` prop
- [Bug]: undefined is not an object (evaluating ' request.signal.aborted ')
- [Bug]: "TypeError: URL constructor: // is not a valid URL" while using data router HOT 9
- [Bug]: Relative option is not work in useNavigate HOT 3
- [Bug]: (a11y)-Multiple accessibility issues with React-Router HOT 1
- [Bug]: The global state manager does not work in conjunction with react-router-dom HOT 1
- [Bug]: encoded # in path parameter causes route to be evaluated differently
- [Bug]: generatePath/matchPath don't handle encoding/decoding `/` the same HOT 1
- [Bug]: Support non-standard HTTP methods in Resource Routes HOT 3
- [Bug]: react-router seems to depend on vulnerable versions of path-to-regexp HOT 8
- [Bug]: react-router-dom v5 uses vulnerable version of path-to-regexp HOT 6
- [Bug]: Mount happens twice on forward navigation HOT 2
- [Bug]: type errors with `exactOptionalPropertyTypes` HOT 4
- [Bug]: React-router does not work with react 18, besides using router v6.12.0 HOT 1
- [Bug]: ScrollRestoration doesn't restore horizontal page scroll HOT 1
- [Bug]: Component does not load for JSX-returning arrow functions HOT 1
- [Bug]: Can we check shouldRevalidation before we cancel a loader? HOT 2
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.