React路由切换后Router外部Header组件未更新问题咨询

• BrowserRouter的核心是React上下文（Context）提供者，它内部维护路由相关状态、监听浏览器历史记录变化，发生路由切换时，只会通知Router内部订阅了路由上下文的组件触发重渲染，不会影响上下文外部的组件。
• 你的Header放在Router组件外部，不属于路由上下文的订阅者，路由切换时Router内部的状态变化是子组件内部状态更新，默认不会触发父组件App重渲染，App没有更新的情况下，Header自然也不会触发重渲染。
• 你在Header中直接读取window.location.pathname属于读取全局变量，全局变量的变化本身不会触发React组件的更新，只有组件的state、props变化，或者所属上下文的状态变动时，组件才会重新执行渲染逻辑。

推荐最优方案：将Header挪到Router组件内部，即可自动订阅路由状态变化，路由切换时Header会自动重渲染，修改后的App组件代码如下：

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import First from './First';
import Second from './Second';
import Third from './Third';
import Header from './Header';

function App() {
  return (
    <div>
      <Router>
        <Header />
        <Switch>
          <Route exact path={'/'} component={First} />
          <Route exact path={'/first'} component={Second} />
          <Route exact path={'/second'} component={Third} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

如果因为业务逻辑必须要把Header放在Router外部，可手动在Header中监听路由变化，通过触发state更新带动组件重渲染，示例代码如下：

import React, { useState, useEffect } from 'react'

export default function Header() {
    const [pathname, setPathname] = useState(window.location.pathname);

    useEffect(() => {
        // 监听浏览器前进后退触发的路由变化
        const handleRouteChange = () => {
            setPathname(window.location.pathname);
        };
        window.addEventListener('popstate', handleRouteChange);
        // 针对history.push/replace触发的路由变化，可额外封装全局事件监听，此处更推荐优先使用上一种方案
        return () => window.removeEventListener('popstate', handleRouteChange);
    }, [])

    const logger = pathname === '/third' ? (<div>This is second</div>) : 
    (<div>this is root</div>)
    return logger
}

内容的提问来源于stack exchange，提问作者Sonny49