How to use universal-router - 10 common examples

action: (context: ActionContext) => `Welcome, ${context.params["username"]}!`
  }
];

resolve(routes2, { path: "/hello/john" })
  .then(result => console.log(result));

// Test 3
const routes3 = [
  {
    path: "/hello/:username",
    action: (ctx: ActionContext, { username }: Params) => `Welcome, ${username}!`
  }
];

resolve(routes3, { path: "/hello/john" })
  .then(result => console.log(result));

// Test 4
const routes4 = [
  {
    path: "/hello",
    action: () => new Promise(resolve => {
      setTimeout(() => resolve("Welcome!"), 1000);
    })
  }
];

resolve(routes4, { path: "/hello" })
  .then(result => console.log(result));

// Test 5

app.get('*', async (req, res, next) => {
  try {
    let css = new Set();
    let statusCode = 200;
    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };

    await UniversalRouter.resolve(routes, {
      path: req.path,
      query: req.query,
      context: {
        insertCss: (...styles) => {
          styles.forEach(style => css.add(style._getCss())); // eslint-disable-line no-underscore-dangle, max-len
        },
        setTitle: value => (data.title = value),
        setMeta: (key, value) => (data[key] = value),
      },
      render(component, status = 200) {
        // console.log('inside render of UniversalRouter', component);
        css = new Set();
        statusCode = status;
        data.children = ReactDOM.renderToString(component);
        data.style = [...css].join('');
        return true;

function onLocationChange(location) {
    // Save the page scroll position into the current location's state
    if (currentLocation.key) {
      saveState(currentLocation.key, {
        ...readState(currentLocation.key),
        scrollX: windowScrollX(),
        scrollY: windowScrollY(),
      });
    }
    currentLocation = location;
    UniversalRouter.resolve(routes, {
      path: location.pathname,
      query: location.query,
      state: location.state,
      context,
      render: render.bind(undefined, container, location), // eslint-disable-line react/jsx-no-bind, max-len
    }).catch(err => console.error(err)); // eslint-disable-line no-console
  }

app.get('*', async (req, res, next) => {
  try {
    let css = new Set();
    let statusCode = 200;
    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };

    await UniversalRouter.resolve(routes, {
      path: req.path,
      query: req.query,
      context: {
        insertCss: (...styles) => {
          styles.forEach(style => css.add(style._getCss())); // eslint-disable-line no-underscore-dangle, max-len
        },
        setTitle: value => (data.title = value),
        setMeta: (key, value) => (data[key] = value),
      },
      render(component, status = 200) {
        // console.log('inside render of UniversalRouter', component);
        css = new Set();
        statusCode = status;
        data.children = ReactDOM.renderToString(component);
        data.style = [...css].join('');
        return true;

const removeHistoryListener = history.listen(location => {
    currentLocation = location
    match(routes, {
      path: location.pathname,
      query: location.query,
      state: location.state,
      context,
      render: render.bind(undefined, container, location.state, {store})
    }).catch(err => console.error(err)) // eslint-disable-line no-console
  })

// Remember the latest scroll position for the previous location
  scrollPositionsHistory[currentLocation.key] = {
    scrollX: window.pageXOffset,
    scrollY: window.pageYOffset,
  };
  // Delete stored scroll position for next page if any
  if (action === 'PUSH') {
    delete scrollPositionsHistory[location.key];
  }
  currentLocation = location;

  try {
    // Traverses the list of routes in the order they are defined until
    // it finds the first route that matches provided URL path string
    // and whose action method returns anything other than `undefined`.
    const route = await UniversalRouter.resolve(routes, {
      ...context,
      path: location.pathname,
      query: queryString.parse(location.search),
    });

    // Prevent multiple page renders during the routing process
    if (currentLocation.key !== location.key) {
      return;
    }

    if (route.redirect) {
      history.replace(route.redirect);
      return;
    }

    appInstance = ReactDOM.render(

}

    if (!self.fetch) {
      await require.ensure([], require =>
        require('isomorphic-fetch'), 'fetch-polyfill'
      )
    }
  }

  CURRENT_LOCATION = location

  const router = require('./routes').default // eslint-disable-line global-require

  const { pathname } = location

  const route = await match(router, { path: pathname, currentRoute: pathname, ...routerMiddleware })

  const component = (
    
      { route.component }
    
  )

  render(component, mnt, mnt.lastElementChild)

  if (FIRST_RENDER) {
    const node = document.getElementById('css')

    if (node) node.parentNode.removeChild(node)

    FIRST_RENDER = false
  }

app.get('*', async(req, res, next) => {
  try {
    let css = new Set();
    let statusCode = 200;
    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };

    await UniversalRouter.resolve(routes, {
      path: req.path,
      query: req.query,
      context: {
        insertCss: (...styles) => {
          styles.forEach(style => css.add(style._getCss())); // eslint-disable-line no-underscore-dangle, max-len
        },
        setTitle: value => (data.title = value),
        setMeta: (key, value) => (data[key] = value),
      },
      render(component, status = 200) {
        css = new Set();
        statusCode = status;
        data.children = ReactDOM.renderToString(component);
        data.style = [...css].join('');
        return true;
      },

// Remember the latest scroll position for the previous location
  scrollPositionsHistory[currentLocation.key] = {
    scrollX: window.pageXOffset,
    scrollY: window.pageYOffset,
  };
  // Delete stored scroll position for next page if any
  if (history.action === 'PUSH') {
    delete scrollPositionsHistory[location.key];
  }
  currentLocation = location;

  try {
    // Traverses the list of routes in the order they are defined until
    // it finds the first route that matches provided URL path string
    // and whose action method returns anything other than `undefined`.
    const route = await UniversalRouter.resolve(routes, {
      ...context,
      path: location.pathname,
      query: queryString.parse(location.search),
    });

    // Prevent multiple page renders during the routing process
    if (currentLocation.key !== location.key) {
      return;
    }

    if (route.redirect) {
      history.replace(route.redirect);
      return;
    }

    ReactDOM.render(

function insertCss(...styles) {
  const removeCss = styles.map(x => x._insertCss());

  return () => removeCss.forEach(f => f());
}

function redirect(to) {
  history.replace(to);
}

const context = { insertCss, store };

const mnt = document.querySelector("main");

const router = new Router(routes);

async function bootstrap(location, router) {
  if (FIRST_RENDER) {
    if (!_DEV_) await registerServiceWorker();

    if (!self.fetch) {
      await import("unfetch" /* webpackChunkName: "fetch-polyfill" */);
    }
  }

  CURRENT_LOCATION = location;

  const { pathname: path, search } = location;

  const route = await router.resolve({ path, store, redirect, search, ...routerMiddleware });