server.get('*', (req, res, next)=> {
  let history = useRouterHistory(useQueries(createMemoryHistory))();
  let store = configureStore();
  let routes = createRoutes(history);
  let location = history.createLocation(req.url);

  match({ routes, location }, (error, redirectLocation, renderProps) => {
    if (redirectLocation) {
      res.redirect(301, redirectLocation.pathname + redirectLocation.search);
    } else if (error) {
      res.status(500).send(error.message);
    } else if (renderProps == null) {
      res.status(404).send('Not found')
    } else {
      let [ getCurrentUrl, unsubscribe ] = subscribeUrl();
      let reqUrl = location.pathname + location.search;

      getReduxPromise().then(()=> {
        let reduxState = escape(JSON.stringify(store.getState()));
        let html = ReactDOMServer.renderToString(
          <Provider store={store}>
            { <RouterContext {...renderProps}/> }
          </Provider>
        );

        if ( getCurrentUrl() === reqUrl ) {
          res.render('index', { html, scriptSrcs, reduxState, styleSrc });
        } else {
          res.redirect(302, getCurrentUrl());
        }
        unsubscribe();
      })
      .catch((err)=> {
        unsubscribe();
        next(err);
      });
      function getReduxPromise () {
        let { query, params } = renderProps;
        let comp = renderProps.components[renderProps.components.length - 1].WrappedComponent;
        let promise = comp.fetchData ?
          comp.fetchData({ query, params, store, history }) :
          Promise.resolve();

        return promise;
      }
    }
  });
  function subscribeUrl () {
    let currentUrl = location.pathname + location.search;
    let unsubscribe = history.listen((newLoc)=> {
      if (newLoc.action === 'PUSH') {
        currentUrl = newLoc.pathname + newLoc.search;
      }
    });
    return [
      ()=> currentUrl,
      unsubscribe
    ];
  }
});
Example #2
0
import 'babel-polyfill'

import React from 'react'
import ReactDOM from 'react-dom'
import { browserHistory } from 'react-router'

import configureStore from 'store/configureStore'
import createRoutes from 'routes/index'
import { Provider } from 'react-redux'
import Immutable from 'immutable'
import _ from 'lodash'

let reduxState = {}
if (window.__REDUX_STATE__) {
  try {
    let plain = JSON.parse(unescape(__REDUX_STATE__))
    _.each(plain, (val, key)=> {
      reduxState[key] = Immutable.fromJS(val)
    })
  } catch (e) {
  }
}

const store = configureStore(reduxState)

ReactDOM.render((
  <Provider store={store}>
      { createRoutes(browserHistory) }
  </Provider>
), document.getElementById('root'))
Example #3
0
import injectTapEventPlugin from 'react-tap-event-plugin';
import 'styles/main.less';
import routes from 'routes/index';

// inject tap event system
injectTapEventPlugin();

const store = configureStore();

// custom histories

/*
const cusHistory = useRouterHistory(createHistory)({
  queryKey: false,
})
*/

// 暂时使用hash,不需要服务端做修改。
const history = syncHistoryWithStore(hashHistory, store);

/*
history.listen(a => {
  console.log(a);
});
*/

ReactDOM.render(
  <Root store={store} history={history} routes={routes()} />,
  document.querySelector('#root')
)
Example #4
0
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { Router, hashHistory } from 'react-router'

//Store
import store from 'redux/store'

//Routes
import routes from 'routes/index'

//Styles
import 'bootstrap-loader'
import 'styles/common.scss'

let fullRoutes = routes();

let reactElement = document.getElementById('app')
render(
  <Provider store={store}>
    <Router history={hashHistory}>{fullRoutes}</Router>
  </Provider>,
  reactElement
)
Example #5
0
 beforeEach(() => {
   _route = IndexRoute(_store)
 })