根据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都将被打印,这意味着这些组件将被重新安装。
请让我知道如何在不重新安装组件的情况下实现路由。