Question

我正在处理一个反应通用应用程序，它被渲染到服务器端和客户端。该应用程序在Chrome上运行＃1，但在Safari上，react-router的Link只是重新呈现整个应用程序并执行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

感谢您的帮助！

Answer 1

您必须将此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

在Safari v8.0.8上，React-intl禁用react-router的链接组件onClick事件

1 个答案: