如何在 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)article用'loading'类渲染可能几毫秒，直到 (3) componentDidMount 设置状态并再次渲染，替换类。

所以我猜我需要在上一页组件而不是下一页组件上添加加载动画？还是将我所有的页面内容 ajax 更好？我真的很惊讶我在这方面找到的信息很少，我希望有人能提供一些有用的建议。谢谢！

Answer 1

尝试使用 React Lazy 和 Suspense 后备