在多条路线上显示组件[重复]

Question

我有 3 个主要模块：CartHolder、Project 和 About。

期望的行为：

• "/": 购物车持有人
• “/project”： CartHolder & Project
• “/about”：关于

从“/”切换到“/project”，我不希望 CartHolder 重新渲染。

如何使用Route 实现这种行为？

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header/>
                <Route path="/project/:name" component={Project}/>
                <Route path="/about" component={About}/>
                <CartHolder/>
            </div>
        </BrowserRouter>
    );
}

Answer 1

在您的 CartHolder 组件中尝试类似的操作

import React, { Component } from "react";
import equal from "fast-deep-equal";

const propsWithoutLocation = props => {
  const { location, ...rest } = props;
  return rest;
};

export default CartHolder => {
    shouldComponentUpdate(nextProps) {
      if (equal(propsWithoutLocation(nextProps), propsWithoutLocation(this.props))) {
        return false;
      }
      return true;
    }

基本上，只要检查任何不是路由的道具是否改变，如果没有，就不要更新