Adding middleware to <RouterContext/>

[catamphetamine]

redux-router uses <RouterContext/> to make it work
https://github.com/acdlite/redux-router/blob/master/src/ReduxRouter.js#L106

        <RouterContext
          {...renderProps}
          createElement={makeCreateElement(renderProps.createElement)}
        />

scroll-behaviour tells in its docs to add a middleware to the render property
https://github.com/taion/react-router-scroll

import { applyRouterMiddleware, browserHistory, Router } from 'react-router';
import useScroll from 'react-router-scroll';

/* ... */

ReactDOM.render(
  <Router
    history={browserHistory}
    routes={routes}
    render={applyRouterMiddleware(useScroll())}
  />,
  container
);

But I don't see render property on <RouterContext/>.
Is there such a property I can set to make it work?

In applyRouterMiddleware source code I can see that it just (?) renders <RouterContext/>

  return (renderProps) => (
    withContext.reduceRight(
      (previous, renderRouterContext) => (
        renderRouterContext(previous, renderProps)
      ), (
        <RouterContext
          {...renderProps}
          createElement={makeCreateElement(renderProps.createElement)}
        />
      )
    )
  )

Does it mean that to make <RouterContext/> work with middleware the render property is not required, and instead <RouterContext/> may just (?) be wrapped (?) with the middleware of interest?

[catamphetamine]

I think that might be the solution:

scroll-behaviour only has renderRouterContext set, so only renderRouterContext functionality is required
https://github.com/taion/react-router-scroll/blob/master/src/index.js#L7

export default function useScroll(shouldUpdateScroll) {
  return {
    renderRouterContext: (child, props) => (
      <ScrollBehaviorContainer
        shouldUpdateScroll={shouldUpdateScroll}
        routerProps={props}
      >
        {child}
      </ScrollBehaviorContainer>
    ),
  };
}

And applyRouterMiddleware really seems to just wrap those renderRouterContexts around the <RouterContext/>, so I might as well make scroll-behaviour work with this code:

      <ScrollBehaviorContainer
          shouldUpdateScroll={shouldUpdateScroll}
          routerProps={routerContextProps}>

          <RouterContext {...routerContextProps}/>

      </ScrollBehaviorContainer>

Do you think that would be a suitable solution?

[taion]

This is a redux-router issue, not a React Router issue. If redux-router provides a different API, it's up to them to expose a way to use router middlewares.

[perrin4869]

@halt-hammerzeit It really seems to be a redux-router issue. applyRouterMiddleware basically outputs a RouterContext which you can then render. For example, in the server side, instead of rendering RouterContext directly, you would render the output of applyRouterMiddleware. redux-router have to provide an API for passing in a custom RouterContext.

[catamphetamine]

@perrin4869 Thanks, the answer you provided is similar to the way I went yesterday. And it seems to work. Forgot to post a link here for googlers:
acdlite/redux-router#261

The key question was "How to add middleware feature to RouterContext" and the answer seems what you wrote:

instead of rendering <RouterContext/> directly, you would render the output of applyRouterMiddleware()

Maybe the formulation of the question doesn't make a lot of sense for a react-router guru, but for all googlers passing by this is what they're for.