javascript - 即使在使用 Render props 之后，React Router 也会重新安装组件

Question

根据 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 意味着组件正在重新安装。

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

标签： javascriptreactjsreact-router