How to use react-router-scroll - 10 common examples

// prevent keyboard scrolling our view, https://www.npmjs.com/package/cordova-plugin-keyboard
    if (window.Keyboard) {
      console.log('Cordova startupApp keyboard plugin found');
      Keyboard.shrinkView(true); // eslint-disable-line no-undef
      Keyboard.disableScrollingInShrinkView(true); // eslint-disable-line no-undef
    } else console.log('ERROR: Cordova index.js startApp keyboard plugin WAS NOT found');
  }

  render(
    // eslint-disable-next-line react/jsx-filename-extension
    
      
         true))}
        >
          {routes()}
        
      
    , document.getElementById('app'),
  );
}

const render = (messages) => {
  ReactDOM.render(
    
      
        
          
        
      
    ,
    MOUNT_NODE
  )
}
// declare const module: any

const render = () => {
  ReactDOM.render(
    
      
    ,
    document.getElementById('app')
  );
};

wrapperHook(appGenerator) {
      const { apolloClient, store } = getRenderContext();
      const app = runCallbacks('router.client.wrapper', appGenerator({
        onUpdate: () => {
          // the first argument is an item to iterate on, needed by vulcan:lib/callbacks
          // note: this item is not used in this specific callback: router.onUpdate
          // runCallbacks('router.onUpdate', {}, store, apolloClient);
        },
        render: applyRouterMiddleware(useScroll((prevRouterProps, nextRouterProps) => {
          // if the action is REPLACE, return false so that we don't jump back to top of page
          return !(nextRouterProps.location.action === 'REPLACE');
        }))
      }));
      return {app};
    },
  };

export default function App({ store, ...renderProps }: Props) {
  const RenderWithMiddleware: any = applyRouterMiddleware(
    useAsyncLoader(),
    useScroll((_prevRouterProps: any, { location, routes }: any) => {
      if (
        routes.some(
          (route: any) =>
            route.ignoreScrollBehavior && route.ignoreScrollBehavior(location),
        )
      ) {
        return false;
      }

      return true;
    }),
  );

  if (__DEVELOPMENT__) {
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const { AppContainer } = require("react-hot-loader");

function renderApp() {
	let blogURL, frontPageRoute;
	if ( FoxhoundSettings.frontPage.page ) {
		blogURL = path + 'page/' + FoxhoundSettings.frontPage.blog + '/';
		frontPageRoute = ;
	} else {
		blogURL = path;
		frontPageRoute = null;
	}

	const routerMiddleware = applyRouterMiddleware( useScroll( shouldUpdateScroll ), keyboardFocusReset( 'main' ) );

	// Add the event Jetpack listens for to initialize various JS features on posts.
	const emitJetpackEvent = () => {
		jQuery( document.body ).trigger( 'post-load' );
	}

	// Routes
	const routes = (
		
			
			
			{ frontPageRoute }

export function clientRender(initialState) {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(
        rootReducer,
        initialState,
        bindMiddleware([sagaMiddleware])
    );
    sagaMiddleware.run(rootSaga);
    const history = syncHistoryWithStore(browserHistory, store);

    /**
     * When to scroll - on hash link navigation determine if the page should scroll to that element (forward nav, or ignore nav direction)
     */
    const scroll = useScroll({
        createScrollBehavior: config => new OffsetScrollBehavior(config), //information assembler for has scrolling.
        shouldUpdateScroll: (prevLocation, { location }) => {
            // eslint-disable-line no-shadow
            //if there is a hash, we may want to scroll to it
            if (location.hash) {
                //if disableNavDirectionCheck exists, we want to always navigate to the hash (the page is telling us that's desired behavior based on the element's existence
                const disableNavDirectionCheck = document.getElementById(
                    DISABLE_ROUTER_HISTORY_NAV_DIRECTION_EL_ID
                );
                //we want to navigate to the corresponding id= element on 'PUSH' navigation (prev null + POP is a new window url nav ~= 'PUSH')
                if (
                    disableNavDirectionCheck ||
                    (prevLocation === null && location.action === 'POP') ||
                    location.action === 'PUSH'
                ) {
                    return location.hash;

export default function AppRouter() {
  return (
    

export default function AppRouter() {
  return (
    
      
        

export default function AppRouter() {
  return (