集成Redux与公私路由后<Link>无法重新渲染组件的排查求助

结合你描述的场景——用Material-UI Drawer做控制面板，集成Redux和公有/私有路由后，<Link>仅修改URL却不触发组件重渲染，刷新才正常，我给你几个针对性的解决方案：

1. 让公有/私有路由支持render写法（完全可行） #

你完全可以在公私路由中使用类似原生<Route>的render={() => <Controls/>}写法，甚至这可能直接解决你的问题。关键是要修改PrivateRoute/PublicRoute的实现，让它同时兼容component和render属性：

// PrivateRoute.js 示例实现
import { Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';

const PrivateRoute = ({ component: Component, render, ...rest }) => {
  // 从Redux获取登录状态
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  return (
    <Route
      {...rest}
      render={(routeProps) =>
        isAuthenticated ? (
          // 优先使用render属性，否则渲染传入的Component
          render ? render(routeProps) : <Component {...routeProps} />
        ) : (
          <Redirect to="/" />
        )
      }
    />
  );
};

export default PrivateRoute;

之后使用时就可以像旧路由那样灵活书写：

<PrivateRoute path="/Control" render={() => <Control />} />
<PrivateRoute path="/Persons" render={() => <Persons />} />

这种写法能确保每次路由变化时，都会重新执行render函数，避开组件的PureComponent特性或Redux connect的pure优化导致的不重渲染问题。

2. 排查"纯组件"优化的影响 #

你提到已经尝试设置pure: false（应该是在Redux的connect配置中），这是正确的方向，但还要补充两点：

• 如果你的PrivateRoute/PublicRoute用了React.memo，需要自定义比较函数，把location、match这些路由相关props纳入比较范围，避免因props浅对比认为无变化而跳过重渲染；
• 确保路由组件能接收到完整的路由props——如果组件是通过Redux connect包裹的，要确认location等props被正确传递，或者用connected-react-router把路由状态同步到Redux store，让组件能感知到路由变化。

3. 确认Router的层级结构 #

检查你的应用结构，确保<Router>包裹了整个包含Drawer和路由的区域。如果Drawer在<Router>外部，路由变化无法触发Drawer内部组件的重渲染。正确的结构应该类似：

<Router history={history}>
  <Drawer>
    {/* 导航Link放在这里 */}
  </Drawer>
  <Switch>
    <PublicRoute path="/" component={LoginPage} exact />
    <PrivateRoute path="/Control" render={() => <Control />} />
    {/* 其他路由 */}
  </Switch>
</Router>

4. 在页面组件中手动监听路由变化 #

如果以上方法都无效，可以在页面组件（比如Control、Persons）中手动监听location变化，强制触发重渲染：

import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';

const Control = () => {
  const location = useLocation();
  // 用路由路径作为key，变化时强制组件重新挂载
  const [routeKey, setRouteKey] = useState(location.pathname);

  useEffect(() => {
    setRouteKey(location.pathname);
  }, [location]);

  return (
    <div key={routeKey}>
      {/* 组件内容 */}
    </div>
  );
};

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