即使使用了渲染道具,React Router也会重新安装组件

时间:2019-12-16 10:35:33

标签: javascript reactjs react-router

根据React Router中的文档,如果我们使用渲染道具,则在更改路线时不会重新安装组件 但是对我来说,每次更改路线后,组件都会重新安装。 下面的示例示例

class Routing extends React.Component {
  componentDidMount = () => {
    console.log("index mounted");
  };
  render() {
    return (
      <Router>
        <>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
          <Switch>
            <Route path="/" exact render={() => <App></App>} />
            <Route path="/users" exact render={() => <Users></Users>} />
            <Route path="/contact" exact render={() => <Contact></Contact>} />
          </Switch>
        </>
      </Router>
    );
  }
}


class Contact extends React.Component {
  componentDidMount = () => {
    console.log("Contact mounted again");
  };
  render() {
    return <h1>Contact</h1>;
  }
}

class Users extends React.Component {
  componentDidMount = () => {
    console.log("Users mounted again");
  };
  render() {
    return <h1>Users</h1>;
  }
}

class App extends React.Component {
  componentDidMount = () => {
    console.log("Home mounted again");
  };

  render() {
    return (
      <div>
        <h1>Home</h1>
        <button onClick={this.handleButtonClick}>Click to make api call</button>
      </div>
    );
  }
}

我在每个组件中都有componentDidMount,并且在每个componentDidMount中都有console.log。每当我更改路线时,该组件中的所有console.log都将被打印,这意味着这些组件将被重新安装。

请让我知道如何在不重新安装组件的情况下实现路由。

0 个答案:

没有答案