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
];
}
});
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'))
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')
)
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
)
beforeEach(() => {
_route = IndexRoute(_store)
})
