[英]React Router v4 Flashing URL
我正在使用本教程在服务器上呈现create-react-app:
现在我的index.js
看起来像这样:
...
const Application = (
<Provider store={store}>
<ConnectedRouter history={history}>
<Frontload noServerRender={true}>
<App />
</Frontload>
</ConnectedRouter>
</Provider>
);
const root = document.querySelector('#root');
if (root.hasChildNodes() === true) {
// If it's an SSR, we use hydrate to get fast page loads by just
// attaching event listeners after the initial render
Loadable.preloadReady().then(() => {
hydrate(Application, root);
});
} else {
// If we're not running on the server, just render like normal
render(Application, root);
}
和我的App.js
:
...
const frontload = async (props) => {
await props.getSettings()
}
class App extends React.Component {
render() {
return (
<MuiThemeProvider theme={createMuiTheme(theme)}>
<JssProvider jss={jss} generateClassName={generateClassName}>
<div>
<CssBaseline />
<NavbarContainer />
<Routes />
<FooterContainer />
</div>
</JssProvider>
</MuiThemeProvider>
)
}
}
export default withRouter(connect(state => ({
settings: state.pages.settings
}), dispatch => ({
getSettings: () => dispatch(getPage('settings'))
}))(
frontloadConnect(frontload, {
onMount: true,
onUpdate: false
})(App)
))
问题很奇怪。 当我通过Link
在站点中导航时,一切正常,但是当我按浏览器的“后退”按钮时,URL闪烁,浏览器导航到上一页,并且前进按钮变为灰色!
我尝试从App
删除withRouter
,但是之后,“前进和后退”将根本无法工作!
我尝试禁用和启用功能并进行了测试,但无法正常工作。
似乎存在兼容性问题。 运行yarn upgrade --dist
,问题似乎已解决。 我仍然不知道问题到底出在哪里,但我很高兴它已经消失了:)
对于那些遵循上述教程的人,有必要研究Connected Router的Breaking Changes 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.