How to use the history.createHistory function in history

To help you get started, we’ve selected a few history examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / react-router / history-tests.ts View on Github external
let history = useBasename(createHistory)({
        basename: '/base'
    })

    // At the /base/hello/world URL:
    history.listen(function(location) {
        console.log(location.pathname) // /hello/world
        console.log(location.basename) // /base
    })

    history.createPath('/the/path') // /base/the/path
    history.push('/the/path') // push /base/the/path
}

{
    let history = createHistory()

    const { pathname, query, search, state} = history.getCurrentLocation()
    console.log(pathname)
    console.log(query)
    console.log(search)
    console.log(state)
}
github dferber90 / webapp / modules / client.js View on Github external
window.store = store
}

// const myCreateElement = (Component, props) => {
//   if (Component.fetchData) {
//     Component.fetchData({
//       dispatch: store.dispatch,
//       getState: store.getState,
//       adapter: adapter,
//     })
//   }
//   return 
// }

// load data before switching to new routes
const history = createHistory()
syncReduxAndRouter(history, store)

const rootRoute = getRootRoute(store)

history.listenBefore((location, callback) => {
  new Promise((resolve) => {
    match({ routes: rootRoute, location }, (error, redirectLocation, renderProps) => {
      resolve(renderProps)
    })
  })
  .then(renderProps => {
    if (!renderProps) return []

    return renderProps.components
      .filter(component => component && component.fetchData)
      .map(component => component.fetchData({
github chemoish / react-universal-tutorial / 3-add-redux / src / client.js View on Github external
// This will emulate a full ES6 environment.
import 'babel-polyfill';

import React from 'react';

import { createHistory } from 'history';
import { Provider } from 'react-redux';
import { render } from 'react-dom';
import { Router } from 'react-router';
import { syncReduxAndRouter } from 'redux-simple-router';

import configureStore from './store/configure-store';
import Route from './route';

const history = createHistory();
const store = configureStore();

syncReduxAndRouter(history, store);

const component = (
  
    
      {Route}
    
  
);

render(component, document.getElementById('root'));
github kadira-samples / rethinking-redux-demo / src / index.js View on Github external
import thunk from 'redux-thunk';
import { createHistory } from 'history'
import { syncReduxAndRouter } from 'redux-simple-router'

import rootReducer from './reducer';
import { createRoutes } from './routes';

// Apply middlewares and add support for dev tools
const finalCreateStore = compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);

// create the store
const store = finalCreateStore(rootReducer);
const history = createHistory();
const Routes = createRoutes(history);

syncReduxAndRouter(history, store);

// Render the the layout
const render = () => {
  ReactDOM.render((
    
      
    
  ), document.getElementById('root'));
};

render();
github Automattic / jetpack / _inc / client / main.jsx View on Github external
case '/privacy':
				navComponent = settingsNav;
				pageComponent = (
					
				);
				break;

			default:
				// If no route found, kick them to the dashboard and do some url/history trickery
				const history = createHistory();
				history.replace( window.location.pathname + '?page=jetpack#/dashboard' );
				pageComponent = (
					
				);
		}

		window.wpNavMenuClassChange();

		return (
			<div aria-live="assertive">
				{ navComponent }
				{ this.renderJumpstart() }</div>
github andreloureiro / cyclejs-starter / js / main.js View on Github external
import {run} from '@cycle/xstream-run';
import {makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import {createHistory} from 'history';
import {makeRouterDriver} from 'cyclic-router';
import Router from './components/Router/index';

const drivers = {
  DOM: makeDOMDriver('#root'),
  HTTP: makeHTTPDriver(),
  router: makeRouterDriver(createHistory(), {capture: true})
};

run(Router, drivers);
github DevAlien / dripr-ui / src / client.js View on Github external
require('babel-core/polyfill');
import ga from 'ga-react-router'
import React from 'react';
import {render} from 'react-dom';
import configureStore from './store/configureStore';
import Root from './components/Root';
import {createHistory} from 'history';
import {ActionTypes} from './constants';
import getRoutes from './routes';
import {Router} from 'react-router';
import {syncReduxAndRouter} from 'redux-simple-router';
import apiClient from './apiClient';


const store = configureStore(window.$STATE, apiClient(window.$STATE.app.authInfo));
const history = createHistory();
const routes = getRoutes(store);
history.listen(location =&gt; {
  ga('set', 'page', location.pathname)
  ga('send', 'pageview');
});

store.dispatch({type: ActionTypes.REHYDRATE});
syncReduxAndRouter(history, store);

render(
  
    
  , document.getElementById('root'));
github algolia / react-instantsearch / packages / examples / instantsearchV2.js View on Github external
function instantsearch(opts) {
  const {
    appId,
    apiKey,
    indexName,

    urlSync,
    threshold = 700,
  } = opts;

  let initialState;
  let hsm;
  if (urlSync) {
    hsm = createHistoryStateManager({
      history: createHistory(),
      threshold,
      onInternalStateUpdate: onHistoryInternalStateUpdate,
      getKnownKeys,
    });
    initialState = hsm.getStateFromCurrentLocation();
  } else {
    initialState = {};
  }

  const ism = createInstantSearchManager({
    appId,
    apiKey,
    indexName,

    initialState,
  });
github wevote / WeVoteServer / web_app / src / index.js View on Github external
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { createHistory } from 'history';
import Root from 'Root';

const rootEl = document.getElementById('app');

const history = createHistory();

render(, rootEl);
github xpepermint / isomorphic-react-relay-boilerplate / app / client.js View on Github external
import './styles/index.styl';

import React from 'react';
import ReactDom from 'react-dom';
import Router from 'react-router';
import {createHistory} from 'history';
import routes from './routes';

let history = createHistory();

ReactDom.render({routes}, document.getElementById('app'))