我有通用应用程序(服务器呈现)。 我的routes.js看起来像这样
<Route path="/" component={Root}>
<Route path="sales/:id" component={View} />
...
</Route>
-
class Root extends Component {
...
render() {
return (
<div>
<Header {...someProps} />
{this.props.children}
</div>
);
}
}
-
app.use((req, res) => {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
...
} else if (redirectLocation) {
...
} else if (renderProps) {
const initialState = {};
const store = configureStore(initialState);
fetchComponentData(store.dispatch, renderProps.components, renderProps.params).then(() => {
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
);
res.status(200).send(renderFullPage({ html, initialState: store.getState()}));
});
} else {
...
}
});
});
我的Root和View组件连接到store(redux)。 它没有服务器渲染,并且服务器上的初始渲染效果很好。当我尝试更改状态并期望Root组件获取新的道具并重新渲染树时,问题就开始了,但在我的情况下,Root组件不会重新渲染并且View组件会重新渲染。
我无法理解它是怎么回事?为什么我的树的一部分只是静态html?
更新: 我还没有找到答案,但我认为Root只是没有给出新的状态。如果是这样,为什么Root组件没有连接到商店?