Question

我正在使用本教程在服务器上呈现create-react-app：

https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e

现在我的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闪烁，浏览器导航到上一页，而前进按钮变为灰色！

我尝试从withRouter中删除App，但是，后退和前进根本不起作用！

我尝试禁用和启用功能，并进行了测试，但无法正常工作。

Answer 1

好像有兼容性问题。运行yarn upgrade --dist之后，问题似乎已解决。我仍然不知道问题到底出在哪里，但我很高兴它已经消失了：）

对于那些遵循上述教程的人，有必要研究Connected Router's Breaking Changes。

React Router v4闪烁的URL

1 个答案: