使用react-router，在后台server端
app.use((req, res) => {
match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
if (err) {
res.status(500).end(`Internal Server Error ${err}`);
} else if (redirectLocation) {
res.redirect(redirectLocation.pathname + redirectLocation.search);
} else if (renderProps) {
const initialState = {
auth: {
isAuthenticated: false,
currentUser: {}
}, open: false }
const store = configureStore(initialState)
const state = store.getState()
const params = Object.assign(req.query, renderProps.params)
fetchComponentDataBeforeRender(store.dispatch, renderProps.components, params)
.then(() => {
// 这里redux的store给Provider，再通过mapStateToProps给对应的容器组件
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
)
res.send(renderFullPage(html, store.getState()));
})
} else {
res.status(404).send('Not found');
}
})
})
const renderFullPage = (appHtml, initialState) => {
return `
<!doctype html public="storage">
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>
<div id="app">
${appHtml}
</div>
</body>
<script type="text/javascript" src="http://localhost:8080/javascripts/bundle.js" charset="utf-8"></script>
<script type="text/javascript" src="http://${serverHost}/javascripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="http://${serverHost}/javascripts/bundle.js" charset="utf-8"></script>
</html>
`
}
下面是fetchComponentDataBeforeRender文件的代码：
export function fetchComponentDataBeforeRender(dispatch, components, params) {
const needs = components.reduce((prev, current) => {
return (current.need || [])
.concat((current.WrappedComponent ? current.WrappedComponent.need : []) || [])
.concat(prev);
}, []);
const promises = needs.map(need => dispatch(need(params)));
return Promise.all(promises);
}
routes.js文件：
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import AppLayout from './AppLayout'
import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'
import MoviesGridList from './MoviesGridList'
import MovieCardShow from './MovieCardShow'
module.exports = (
<Route path="/" component={AppLayout}>
<IndexRoute component={MoviesGridList} />
<Route path="/movies" component={MoviesGridList} />
<Route path="/movies/:id" component={MovieCardShow} />
<Route path="/users/login" component={LoginForm} />
<Route path="/users/register" component={RegisterForm}/>
</Route>
)
每次点击链接都会刷新页面，重新加载bundle.js和common.js，为什么不是根据路由加载对应的component呢？