reactjs - Next.js - 浏览器返回 --- TypeError: Cannot read property 'split' of undefined

问题描述

我的问题与此类似。 https://github.com/zeit/next.js/issues/5604 我正在使用自定义服务器，但没有使用任何自定义路由处理。即使删除自定义服务器并且只运行下一个，我在使用浏览器后退按钮导航回来时也会收到此错误。如https://github.com/zeit/next.js/blob/canary/errors/popstate-state-empty.md中所述，我没有在任何地方操纵 window.history。我仍然收到此错误。我正在使用 next/router 进行路由。

这是 _app.js 代码。

import React from 'react';
import App from 'next/app';
import Router from 'next/router';
import Head from 'next/head';
import withRedux from 'withRedux';
import { Provider } from 'redux-bundler-react';
import { ThemeProvider } from 'emotion-theming';
import { Global } from '@emotion/core';
import themeOne from 'ui-web/theme';
import { getCookie } from 'modules/authentication';
import configureStore from '../../src/store';
import { persist, cacheVersions } from '../../src/common';
import { appWithTranslation } from '../../i18n';
const makeStore = initialState => configureStore(initialState);
class MyApp extends App {
  static async getInitialProps(props) {
    const { Component, ctx, router } = props;
    if (ctx.isServer && ctx.req.headers.cookie) {
      const token = getCookie('authToken', ctx.req);
      ctx.store.doSetAuthToken(token);
    }
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx, router.pathname)
      : {};
    return { pageProps };
  }
  render() {
    const { Component, store, pageProps } = this.props;
    return (
      <Provider store={store}>
        <ThemeProvider theme={themeOne}>
          <Head>
            <title>Learny</title>
            <link
              href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap'
              rel='stylesheet'
            />
          </Head>
          <Global
            styles={theme => ({
              body: {
                margin: 0,
                overflowX: 'hidden',
                backgroundColor: theme.colors.background,
                a: {
                  textDecoration: 'none',
                },
              },
            })}
          />
          <Component {...pageProps} />
        </ThemeProvider>
      </Provider>
    );
  }
}
export default withRedux(makeStore, { debug: false, persist, cacheVersions })(
  appWithTranslation(MyApp)
);

server.js 代码示例是

/* eslint-disable @typescript-eslint/no-var-requires */
const express = require('express');
const next = require('next');
const nextI18NextMiddleware = require('next-i18next/middleware').default;

const nextI18next = require('./i18n');

const port = process.env.PORT || 3000;
const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = app.getRequestHandler();

(async () => {
  await app.prepare();
  const server = express();

  server.use(nextI18NextMiddleware(nextI18next));

  server.all('*', (req, res) => handle(req, res));

  await server.listen(port);
  console.log(`> Ready on http://localhost:${port}`);
})();

标签： reactjsreact-reduxnext.js

reactjs - Next.js - 浏览器返回 --- TypeError: Cannot read property 'split' of undefined

问题描述

解决方案

推荐阅读