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

Question

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

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

版本：

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

组件下有两条路由Switch：

1. / - 用于 Home 组件
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;

小提琴在这里可用

多次单击主页链接会生成一条Home rendered消息。

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

标签： reactjsreact-routerreact-router-dom

Answer 1

我在这里提出了一张相关的 Github 票

并被社区成员告知这是By-Design

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