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)
- [Bug]: Absolute URL detection is too aggressive (breaking change from 6.8.0->6.8.1)
- [Bug]: Multiple memory routers cannot be used independently at the same time HOT 3
- [Bug]: Incorrect Handling of Double-Encoded URL Parameters HOT 3
- [Bug]: useParams type always adds undefined HOT 4
- [Bug]: RouterProvider renders old state when the router is re-initialized HOT 1
- useNavigate can only be called inside a Router HOT 5
- [Bug]: Error no route matches URL / v6.22.1 with Create react app HOT 2
- [Bug]: isBrowser false when no document.createElement
- [Bug]: Uncaught (in promise) TypeError: subscriber is not a function HOT 4
- [Docs]: I want to contribute to making Korean documents. HOT 1
- [Bug]: I can't navigate to the /path directly HOT 2
- [Bug]: What's the updated way to navigate outside React Components? HOT 4
- [Bug]: route specific components are not rendering if the app is configured to run at different base path using a webmanifest file HOT 5
- [Bug]: Serious bug, If you repeat from the list page to the details page for many times, the page will freeze(real mobile phone)
- [Bug]: encType on Form does not include "application/json" HOT 1
- [Bug]: react-router-dom is showing a white page HOT 3
- [Bug]: Loader runs twice on page refresh and without using <StrictMode> HOT 2
- [Bug]: useSearchParams hook ignores search params if url ends with hash-link
- [Bug]: Memory leak when using `<Redirect />` in tests with jest + JSDOM
- [Bug]: only '/' is working created by createBrowserRouter, other is 404 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.