Question

我想将一些数据传递到MainScreen组件，但是在以下示例中，即使我访问loadData()路由，也正在调用/about。

我可以传递loadData函数并从MainScreen调用它，但是我不希望组件承担此责任。

如何仅在访问路由时加载数据？

class App extends React.Component {
  loadData = () => {
    console.log("Loading data");
    return {
      something: 123
    };
  }
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <MainScreen data={this.loadData()} />
          </Route>

          <Router path="/about">
            <About />
          </Router>
        </Switch>
      </Router>
    );
  };
}

Answer 1

此行为不是由于使用React路由器，而是由于React架构。

此行

<Route exact path="/">
    <MainScreen data={this.loadData()} />
</Route>

看起来像这样after transpiling

React.createElement(Route, { exact: true, path: "/" }, 
    React.createElement(MainScreen, {data: this.loadData()}, null))

因此，用JSX编写的代码将被转换为纯JS，然后运行。正如您从上面的代码中看到的那样，尽管MainScreen元素是否由Route呈现，但仍将创建{React.createElement(MainScreen, {data: this.loadData()}, null)，因为它是另一个{{ 1}}，用于创建React.createElement组件）

您可以使用render props解决您的问题。这样，您就可以将渲染函数传递给Route组件，并且只有在路由匹配的情况下才会调用它。

Route

这里是sample

避免加载通过React Router作为道具传递的数据

1 个答案: