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我的所有页面内容？我真的很惊讶我在这方面发现的信息很少，我希望有人提供一些有用的建议。谢谢！

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

0 个答案: