3

我正在开发一个在服务器端和客户端呈现的反应通用应用程序。该应用程序在 Chrome 上运行 #1，但在 Safari 上，react-routerLink只是重新渲染整个应用程序并执行 http 请求。

应用程序正确呈现，但是当它在 Chrome 中完美运行时，链接不会在 Safari 中进行转换。

这是我的 routing.js 文件，它是一个 expressjs 中间件

    import React from 'react';
    import { trigger } from 'redial';
    import createMemoryHistory from 'history/lib/createMemoryHistory';
    import useQueries from 'history/lib/useQueries';
    import { match, RouterContext } from 'react-router';
    import { Provider } from 'react-redux';
    import { createStore, applyMiddleware } from 'redux';

    import { thunkMiddleware } from './thunkMiddleware';
    import reducers from 'reducers';
    import routes from '../routes';

    const store = applyMiddleware(thunkMiddleware)(createStore)(reducers);
    const { dispatch } = store;

    function getRootComponent(renderProps) {
      const state = store.getState();

      const component = (
        <Provider store={store}>
          <RouterContext {...renderProps} />
        </Provider>
      );

      return {
        component,
        initialState: state,
      };
    }

    function routing(req, res) {
      const history = useQueries(createMemoryHistory)();
      const location = history.createLocation(req.url);

      return new Promise((resolve, reject) => {
        match({ routes, location }, (error, redirectLocation, renderProps) => {
          // Get array of route components:
          const components = renderProps.routes.map(route => route.component);
          // Define locals to be provided to all fetcher functions:
          const locals = {
            path: renderProps.location.pathname,
            query: renderProps.location.query,
            params: renderProps.params,
            cookies: req.cookies,
            // Allow fetcher functions to dispatch Redux actions:
            dispatch,
          };

          if (typeof req.cookies.user_token === 'undefined' && (req.url !== '/login')) {
            res.status(301).redirect('/login');
          } else {
            if (redirectLocation) {
              reject(res.status(301).redirect(redirectLocation.pathname + redirectLocation.search));
            } else if (error) {
              reject(res.status(500).send(error.message));
            } else if (renderProps === null) {
              reject(res.status(404).send('Not found'));
            }

            // trigger l'action de "redial"
            trigger('fetch', components, locals)
              .then((cookieValues) => {
                let cookieTime = 3600000; // 1 heure

                if (typeof cookieValues !== 'undefined' && typeof cookieValues[0] !== 'undefined') {
                  if (typeof req.cookies.remember_me !== 'undefined') {
                    cookieTime = 1296000000; // 15 jours
                    res.cookie('remember_me', true, { maxAge: cookieTime, httpOnly: false });
                  }

                  res.cookie('user_loggedIn', cookieValues[0].user_loggedIn, { maxAge: cookieTime, httpOnly: false });
                  res.cookie('user_id', cookieValues[0].user_id, { maxAge: cookieTime, httpOnly: false });
                  res.cookie('user_token', cookieValues[0].user_token, { maxAge: cookieTime, httpOnly: false });
                }

                resolve(getRootComponent(renderProps));
              })
              .catch(reject);
          }
        });
      });
    }

    export default routing;

这是我app.js的客户端渲染

history.listen(() => {
  // Match routes based on location object:
  match({ history, routes }, (routerError, redirectLocation, renderProps) => {
    console.log(routerError, redirectLocation, renderProps);
    // Check si renderProps est true sinon c'est un redirect
    if (renderProps) {
      // Get array of route components:
      const components = renderProps.routes.map(route => route.component);

      // Define locals to be provided to all lifecycle hooks:
      const locals = {
        path: renderProps.location.pathname,
        query: renderProps.location.query,
        params: renderProps.params,
        state: store.getState(),
        // Allow lifecycle hooks to dispatch Redux actions:
        dispatch,
      };

      // Fetch deferred, client-only data dependencies
      trigger('defer', components, locals)
        // Finally, trigger 'done' lifecycle hooks:
        .then(() => {
          const state = store.getState();

          // checkIfFormIsCompleted(location, state, () => {
          renderApplication();

          trigger('done', components, { ...locals, state });
          // });
        });
    }

    function renderApplication() {
      ReactDOM.render((
        <Provider store={store}>
          <Router history={history}>{routes}</Router>
        </Provider>
      ), document.getElementById(APP_DOM_CONTAINER));
    }
  });
});

当我console.log都在两者中，一切都很好。没有错误，服务器和客户端都没有错误。链接只是不想触发历史更改并进行应用程序更改。

如果重要的话，我也会使用 react-router-redux，我只是更新了软件包以检查它们是否可以工作，但没有任何改变。

"react": "^15.1.0",
"react-router": "^2.7.0",
"react-router-redux": "^4.0.0",
"redux": "^3.0.6",
"redux-form": "^5.2.4",

我刚刚深入研究了 DOM 以查看单击事件是如何绑定的，并且我看到 Safari 中的链接错过了来自ReactEventListener.js.

http://imgur.com/a/GA7bI

谢谢您的帮助！

4

1 回答 1

2

您好必须将此 polyfill 脚本添加到我的 HTML 页面。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.fr,Intl.~locale.en" />

之后，一切正常！我工作的 iMac 上没有控制台错误或任何东西，但在我的笔记本电脑上，控制台上有错误。

您可以在此处查看更多信息：

http://formatjs.io/github/#polyfills

于 2016-09-01T15:51:50.643 回答