Question

Youtube，Instagram，Github如何在收到数据后才更改内容？

<Switch>
    ...Other Route
    <Route path = "/" exact component={HomeComp} />
    <Route path = "/articles" component={ArticleComp} />
</Switch>

据我所知，当我点击Nav Link将网址从/替换为/articles时，该组件也会从HomeComp替换为ArticleComp。但是我从其他SPA应用程序（我在上面提到的那些）看到的，即使url被替换但是组件没有替换而是有进度条，组件仅在接收来自获取请求的响应之前被替换。如果你无法理解我的话，我会尝试包含一张图片以便更好地理解

如果我想做那样的话我应该在哪里执行获取请求？来自文档说它应该在componentsDidMount()中执行。但似乎不正确，因为在加载数据之前组件不是初始化的。
很简单的问题如何才能实现目标？仅在收到提取响应而非replace url > replace components > start fetch request后才替换组件。我寻求的解决方案就像github，youtube一样（下面的照片）。
如果我想实现这个目标，我还能坚持使用react-router吗？

抱歉不断重复同样的问题，我很担心我的问题并不清楚。英语不是我的主要语言，所以对我来说真的很难研究，我不知道包含哪些关键词来找到正确的解决方案。如果问这个问题，请先为我提供链接。谢谢！

Answer 1

因此，这里的假设是您希望UI的某些部分在不同的页面中共用。即... HomeComp和ArticleComp。

想象一下，你有一个Layout组件（容器）：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Header from './Header';
import Footer from './Footer';

class Layout extends Component {
    static propTypes = {
        actions: PropTypes.object.isRequired,
        children: PropTypes.node,
    };

    render() {
        return (
            <div className={_className}>
               <Header />
               <div className={_rhsContentClassName}>
                 { this.props.children }
               </div>
               <Footer />
            </div>
        );
    }
}
export default Layout;

现在，在您的路线文件中，您将路线描述为

<Switch>
    ...Other Route
    <Route path = "/" exact component={HomeComp} />
    <Route path = "/articles" component={ArticleComp} />
</Switch>

对于每个路径组件HomeComp或ArticleComp，您的反应组件应如下所示：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Layout from './Layout';
import Preloader from './Preloader';

class ArticleComp extends Component {
    static propTypes = {
        actions: PropTypes.object.isRequired,
    };

    componentWillMount() {
         this.setState({ isLoading: true };
         actions
            .fetchData()
            .then(() => {
               // do something
               // store data for the content
               this.setState({ isLoading: false };
            });
    }

    render() {
        if (isLoading) 
          return <Preloader />;

        return (
            <Layout>
               <div> {/* content based on the fetch request */}</div>
            </Layout>
        );
    }
}
export default ArticleComp;

这样，您就可以将Header，Footer或其他静态（甚至是动态问题）与基于请求的真实内容隔离开来。

仅在从反应路由器中的第三方收到数据后更改组件

1 个答案: