如何在 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 回退