wrap.jsx

// this wrapper component was never a Route! Just another way
// the old version "recreated react rendering"
<Route component={Wrapper}>
  <Route path="/foo" component={Foo}/>
  <Route path="/bar" component={Bar}/>
  <Route path="/baz" component={Baz}/>
</Route>

// whenever one of those paths matched, you'd get something like
// <Wrapper><Foo/></Wrapper>
// but only when one of them matched would Wrapper ever render

// in v4 you can't just wrap some matches with Wrapper because
// it would always render and we only want it render when we
// have a match. The following code doesn't do what we want:
<Wrapper>
  <Match pattern="/foo" component={Foo}/>
  <Match pattern="/bar" component={Bar}/>
  <Match pattern="/baz" component={Baz}/>
</Wrapper>

// the person who asked the question suggested you can use a HOC
const withWraper = (Component) => (props) => (
  <Wrapper><Component {...props}/></Wrapper>
)

<Match pattern="/foo" component={withWrapper(Foo)}/>
<Match pattern="/bar" component={withWrapper(Bar)}/>
<Match pattern="/baz" component={withWrapper(Baz)}/>

// I'd probably prefer to use a plain ol' component so we're not creating
// new component definitions every render (which will mess w/ lifecycles if
// you call it inline like above)
const MatchWithWrapper = ({ component:Component, ...rest }) => (
  <Match {...rest} render={(props) => (
    <Wrapper><Component {...props}/></Wrapper>
  )}/>
)

<MatchWithWrapper pattern="/foo" component={Foo}/>
<MatchWithWrapper pattern="/bar" component={Bar}/>
<MatchWithWrapper pattern="/baz" component={Baz}/>

// and ofc, you could also just render `<Wrapper>` inside of each of
// those components (Foo, Bar, Baz) directly.

// Point is, it's all just "normal React rendering" now, there's no
// special things the Router does with rendering like it used to