时间戳

首页 > 解决方案 > 避免使用 React Router 加载作为 props 传递的数据

reactjs - 避免使用 React Router 加载作为 props 传递的数据

问题描述

我想将一些数据传递给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>
    );
  };
}

标签： reactjsreact-router-dom

解决方案

这种行为不是因为使用了 react 路由器，而是因为 React 架构。

这条线

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

转译后看起来像这样

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

所以用 JSX 写的代码会被转译成普通的 JS 然后运行。正如您从上面的代码中看到的那样MainScreen，无论是否渲染元素，都会创建元素Route（React.createElement(MainScreen, {data: this.loadData()}, null)将被调用，因为它是另一个React.createElement用于创建Route组件的参数）

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

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

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

这是示例

推荐阅读