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]: createFileRoute beroferLoad return value is not typechecked by typescript is root was created with context HOT 2
- [Bug]: Links in <fieldset disabled> reload the page in firefox HOT 1
- [Bug]: Can not navigate after signInWithRedirect for Google from Firebase HOT 1
- [Bug]: useBlocker not prevent fetcher submits HOT 2
- [Bug]: v3 incompatibility with React 18 and StrictMode HOT 1
- [Bug]: `<Navigate to=...` breaks after `6.14.2` HOT 2
- [Bug]: useBlocker is not working HOT 5
- [Bug]: Cannot navigate in windows production HOT 2
- [Bug]: Unable to Pass State Using useNavigate When Navigating Back to Previous Route HOT 1
- [Bug]: Navigation don't work with createBrowserRouter sometimes HOT 2
- [Bug]: lazy loaded module error in nested router is catched only by the parent route with the * wildcard, not by the `errorElement` in the nested router HOT 2
- [Bug]: `fetcher.data` is define when submitting via `fetcher.submit` but is undefined when submitting a `fetcher.Form` HOT 3
- [Bug]: Navigation from '//' pathname does not work; path '*' is not matching the '//' page
- [Bug]: Getting "A router only supports one blocker at a time" warning when running your navigation-blocking example
- [Bug]: `setSearchParams` do not provide the latest queryString passed as argument to `navigate` HOT 3
- [Bug]: React Router swallows render error HOT 1
- [Bug]: useBlocker in createBrowserRouter is not working
- [Bug]: useLocation value being null when 0 is set as the state value of useNavigate
- [Docs]: for useSearchParams, functional updates should be explained in more detail HOT 3
- [Bug]: React router doesn't handle 'content://' URLs
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.