如何显示 React Router 组件之间的加载动画

Question

这是一个基本情况：我有一个导航，其中包含链接和主内容区域中这些链接的多个路由。

const App = () => (
<div id="page-container">
<Nav />
<main id="main">
<Switch>
<Route exact path="/" component={IndexPage} />
<Route exact path="/blog" component={BlogPage} />
<Route exact path="/about" component={AboutPage} />
<Route component={NotFoundPage} />
</Switch>
</main>
</div>
);

有时，当我单击导航链接时，主内容区域会立即更新，有时加载下一个组件可能需要 2 或 3 秒。 我相信等待的时间长得离谱(没有迹象表明正在加载任何东西)。

我似乎只找到我尝试过的 React Router Transitions，但它似乎需要一个静态timeout来制作过渡动画。 我只希望在必要时出现加载动画;我不希望每次都对路线进行动画处理。 React Transition Group 似乎还要求将每条路由包装在一个Transition组件中，这需要一个location参数，这在我当前的布局中似乎无法拥有。

以下是我希望做的：

我希望在我的Page组件中添加一个布尔状态变量以跟踪loading：

class Page extends React.Component {
constructor (props) {
super(props);
this.state = {
loading: true
};
}
componentDidMount() {
this.setState({
loading: false
});
}
render() {
return (
<article className={this.state.loading ? 'loading' : ''}>
... stuff ...
</article>
);
}
}

但这似乎不起作用，因为componentDidMount在render后触发，即在所有加载时间之后。 因此，基本上，(1) 它加载了一段时间，(2) 使用'loading'类渲染article可能几毫秒，直到 (3) componentDidMount 设置状态并再次渲染，替换类。

所以我猜我需要在上一页组件而不是下一页组件上添加加载动画？ 还是 ajax 我所有的页面内容更好？ 我真的很惊讶我发现的信息如此之少，我希望有人有一些有用的建议。 谢谢！

Answer 1

尝试使用 React Lazy 和 Suspense 回退