React Router v5父组件随子路由切换重渲染的问题与优化方案

问题解答： #

1. 这种重渲染是正常行为吗？

是的，这属于React Router v5下的正常行为。原因在于你定义的根路由 <Route path="/" component={Store}/> —— 所有以 / 开头的路径（包括 /product/First、/product/Second 这类子路径）都会匹配这个根路由。每次路由切换时，React Router会给Store组件传递新的location对象（因为路由路径变了），而React组件默认会在props变化时触发重渲染，所以Store会跟着重新渲染。

2. 如何避免父组件（Store）在子路由变化时重渲染？

针对你的场景，有几种可行的优化方案，核心都是阻止不必要的props变化触发重渲染：

方案一：给类组件添加shouldComponentUpdate生命周期钩子

因为你的Store是类组件，可以直接通过shouldComponentUpdate判断是否需要重渲染。我们只需要在match或history真正变化时才允许重渲染（location的变化不会影响Store的渲染结果）：

class Store extends Component {
  shouldComponentUpdate(nextProps) {
    // 只有当match或history对象发生变化时，才触发重渲染
    return this.props.match !== nextProps.match || this.props.history !== nextProps.history;
  }

  render(){
    console.log("rendering Store");
    const {match} = this.props;
    return <div>
      <h1>This is the Store</h1>
      <Link to={`${match.url}product`}>See products</Link>
      <Route path={`${match.path}product`} component={Product}/>
    </div>
  }
}

方案二：使用React.memo包裹组件（函数/类组件通用）

React.memo可以对组件的props进行浅比较，我们可以自定义比较逻辑，忽略location的变化：

// 定义自定义props比较函数
const areStorePropsEqual = (prevProps, nextProps) => {
  // 当match和history都未变化时，不需要重渲染
  return prevProps.match === nextProps.match && prevProps.history === nextProps.history;
};

// 用React.memo包裹Store组件
const MemoizedStore = React.memo(Store, areStorePropsEqual);

// 在Route中使用优化后的组件
function App() {
  console.log("rendering App");
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/" component={MemoizedStore}/>
      </BrowserRouter>
    </div>
  );
}

方案三：改用Route的render属性传递组件

这种方式可以更灵活地控制传递给组件的props，结合React.memo使用效果一致：

const MemoizedStore = React.memo(Store, areStorePropsEqual);

function App() {
  console.log("rendering App");
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/" render={props => <MemoizedStore {...props} />} />
      </BrowserRouter>
    </div>
  );
}

补充说明 #

这些方案的核心逻辑是：Store组件的渲染结果并不依赖location对象的变化（它只需要match来构建子路由路径），所以我们可以忽略location的变化，从而阻止不必要的重渲染。

内容的提问来源于stack exchange，提问作者Victor.dMdB