React-intlは、Safari v8.0.8の反応ルータのリンクコンポーネントのonClickイベントを無効にします。

Question

私は、サーバサイドとクライアントサイドでレンダリングされるリアクションユニバーサルアプリケーションに取り組んでいます。アプリケーションはChromeで動作しますが、Safariでは反応ルータのLinkがアプリケーション全体を再レンダリングしてHTTPリクエストを行います。

アプリケーションは正しくレンダリングされますが、リンクがChromeで完全に動作するときにSafariで遷移が行われません。

これは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; 

であり、これは私のすべての両方でconsole.log、およびすべてだったとき

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)); 
    } 
    }); 
}); 

をレンダリング私のクライアント側のための私のapp.jsである私のrouting.jsファイルですOK。エラーはなく、サーバー側とクライアント側で間違ったものはありません。リンクはヒストリの変更を引き起こしたくなく、アプリケーションを変更したくないだけです。

私は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", 

私はちょうどイベントがバインドされていると私はSafariでリンクがReactEventListener.jsからイベントを見逃しているのを見クリック方法を確認するためにDOMに掘っ。

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