reactjs - React Router - 导航到相同的路线导致重新渲染

Question

您好，我不确定这是期望的行为还是错误。

这是一个带有 react-router-dom 的空 create-react-app 示例

版本:

• “ react ”:“^16.13.1”，
• "react-dom": "^16.13.1",
• "react-router-dom": "^5.2.0",
• “ react 脚本”:“3.4.1”

Switch组件下有两条路由:

1. /- 用于主页组件
2. /contacts - 用于联系人组件

    import React from "react";
    import { Switch, Route, BrowserRouter as Router, Link } from "react-router-dom";
    
    class Home extends React.PureComponent {
      render() {
        console.log("Home rendered");
        return <h1>Homepage</h1>;
      }
    }
    
    //const HomeMemo = React.memo(Home);
    //const Home = () => <h1>Homepage</h1>;
    const Contacts = () => <h1>Contacts</h1>;
    
    const Header = () => {
      console.log("Header Render");
      return (
        <header className="App-header">
          <Link to="/">Home</Link>
          <br />
          <Link to="/contacts">Contacts</Link>
        </header>
      );
    };
    
    function App() {
      console.log("App Render");
      return (
        <div className="App">
          <Router>
            <Header />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/contacts" component={Contacts} />
            </Switch>
          </Router>
        </div>
      );
    }
    
    export default App;

fiddle 可用 here

多次点击 Home 链接会产生一条 Home rendered 消息。

我的假设是，如果我们已经在同一条路线上，它不会尝试重新渲染？

Answer 1

我已经提出了相关的 Github 票证 here

一位社区成员告诉我们这是By-Design

这个设计决定的原因仍然未知。