Display component on multiple routes

Question

I have 3 main modules: CartHolder, Project & About.

Desired behavior:

"/": CartHolder
"/project": CartHolder & Project
"/about": About

Switching from "/" to "/project", I don't want CartHolder to re-render.

How can I realize such behavior using Route?

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

Does this answer your question? [Multiple path names for a same component in React Router](https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router) — keikai, Dec 24 '19 at 15:37

score 0 · Answer 1 · answered Dec 24 '19 at 15:36

Try something like this in your CartHolder component

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;
    }

Basically, just check if any of the props that aren't the route changed, and if they didn't, don't update

Display component on multiple routes

1 Answers1