I'm coming from AngularJS world and start some days ago writing my first React App with react-router
, in AngularJS I do:
app.directive('Loading', function($rootScope, $timeout) {
return {
restrict: 'E',
replace: true,
template: '<p>Loading</p>'
link: function(scope, element) {
$rootScope.$on('$routeChangeStart', function(event, currentRoute, previousRoute) {
element.removeClass('ng-hide');
});
$rootScope.$on('$routeChangeSuccess', function() {
element.addClass('ng-hide');
});
}
};
});
and then I just add <Loading></Loading>
. So now in my React App I have:
class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</div>
</Router>
);
}
}
and my two components are simple:
class Home extends Component {
render() {
return (
<h1>Home</h1>
);
}
}
class About extends Component {
render() {
return (
<h1>About</h1>
);
}
}
Can I do this without using reduxJS?
you can use a High Order Component in react to do this in a generic way.
Look is a example: