gistfile1.js

const ToggleDisplayMatch = ({ component: Component, ...rest }) => (
  <Match {...rest}>
    {({ matched, ...props }) => (
      <div style={{ display: matched ? 'block' : 'none' }}>
        <Component {...props}/>
      </div>
    )}
  </Match>
)

// then use it like this:

<ToggleDisplayMatch pattern="/whatever" component={WhateverPage}/>
<ToggleDisplayMatch pattern="/stuff" component={Stuff}/>

Display block / none is an unnecessary abstraction. Just don't render.

is simple and powerful.
I would call it MatchRoute for specificity.
Thnks.

@steida If swapping components results in massive diffs, that pauses the app for a long time with no feedback after clicking a link. Swapping block / none would almost remove that delay.