如何添加加载屏幕以响应路由器的模糊匹配？

Question

应用程序组件

function App() {
  const links = ["page-1", "page-2", "page-3"].map(item => {
    return (
      <Link key={item} to={"/" + item}>
        {item}
      </Link>
    );
  });

  return (
    <BrowserRouter>
      <>
        <nav>
          <Link to="/">Home</Link>
          {links}
        </nav>

        <div className="app">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/:pagename" component={Page} />
          </Switch>
        </div>
      </>
    </BrowserRouter>
  );
}

页面组件

Page extends Component {
  constructor(props) {
    super(props);

    this.state = { loading: true };

    setTimeout(() => {
      this.setState({ loading: false });
    }, 500);
  }

  render() {
    return this.state.loading ? (
      <h1>Loading...</h1>
    ) : (
      <h1>{this.props.match.params.pagename}</h1>
    );
  }
}

问题

我想要一个加载屏幕时，反应之间的页面切换。从"/“开始没有问题。但是，在"/page-1“和"/page-2”之间切换时，尽管使用了setTimeOut()函数，它并不显示加载屏幕。

当我第一次切换回"/“时，它就能工作了。A.k.a.从"/page-1“到"/”，再到"/page-2“。当从"/page-1“切换到"/page-2”时，如何使加载屏幕显示？

Answer 1

使用的组件是相同的，因此只会发生重呈现。构造函数将不再被调用。

对于这些情况，我建议尝试进入componentWillRecieveProps并检查pagename参数是否正在改变：

componentWillReceiveProps(nextProps) {
    if(this.props.match.params.pagename !== nextProps.match.params.pagename) {
        this.setState({ loading: true });
        setTimeout(...);
    }
}

Answer 2

因为正在加载相同的组件，所以您可以尝试这一点--我还没有测试过这段代码，但我认为这是可行的

Page extends Component {
 constructor(props) {
 super(props);

 this.state = { loading: true };
}

componentWillReceiveProps(nextProps){
 this.setState({ loading: true });
 setTimeout(() => {
   this.setState({ loading: false });
 }, 1000);
}

render() {
  return this.state.loading ? (
     <h1>Loading...</h1>
     ) : (
     <h1>{this.props.match.params.pagename}</h1>
  );
 }
}