我来自 AngularJS 世界,几天前开始使用 react-router
编写我的第一个 React 应用程序,在 AngularJS 中我这样做:
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');
});
}
};
});
然后我只添加 <Loading></Loading>
.所以现在在我的 React 应用程序中我有:
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>
);
}
}
我的两个组件很简单:
class Home extends Component {
render() {
return (
<h1>Home</h1>
);
}
}
class About extends Component {
render() {
return (
<h1>About</h1>
);
}
}
我可以在不使用 reduxJS 的情况下执行此操作吗? ?
最佳答案
关于javascript - 在 react 路由器中的路由之间显示一个简单的加载指示器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47104208/