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>
    );
  }
}

问题：

当React在页面之间切换时，我想要一个加载屏幕。它以“ /”开头没有问题。但是，在说“ / page-1”和“ / page-2”之间切换时，尽管有setTimeOut()功能，它也没有显示加载屏幕。

当我先切换回“ /”时它起作用。又名从“ / 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

因为正在加载相同的组件，您可以尝试执行此操作，但我尚未测试此代码，但我认为这可以正常工作

function isSubSet(a, b) {
    if ((a[0] >= b[0] && a[1] <= b[1]) ||
        (a[0] <= b[0] && a[1] >= b[1])) {
        return true;
    } else {
        return false;
    }
}

function mergeArray(arr) {

    let newArr = [];

    for (let i = 0; i < arr.length - 1; i++) {
        if (isSubSet(arr[i], arr[i + 1])) {
            newArr.push(arr[i + 1]);
        }
    }

    return newArr;
}

const data = [[0, 33], [66, 80], [0, 66], [33, 100]];

let arr = mergeArray(data.sort());

如何将加载屏幕添加到React路由器的模糊匹配中？

2 个答案: