2017-07-11 30 views
2

基本的にChromeとFirefoxではIE上で動作しますが、リンク要素のみをクリックするとURLは変更されます。私は反応ルータでUpdate Blocking問題について知っているが、私はそれが事実ではないと思う - 私は悲しい限り、それはIE上でのみ失敗する。リアクションルータはURLを変更しますが、ビューは表示されません(Internet Explorer 11のみ)

これは私のスタック(MERN Starter)です:

"react": "^15.1.0", 
"react-bootstrap": "^0.31.0", 
"react-dom": "^15.1.0", 
"react-helmet": "^3.1.0", 
"react-intl": "^2.1.2", 
"react-redux": "^4.4.5", 
"react-router": "2.8.0", 
"redux": "^3.5.2", 
"redux-thunk": "^2.1.0", 

App.js < - ルート要素(/client/App.js)

export default function App(props) { 
    return (
    <Provider store={props.store}> 
     <IntlWrapper> 
     <Router history={browserHistory}> 
      {routes} 
     </Router> 
     </IntlWrapper> 
    </Provider> 
); 
} 

Routes.js

<Route path="/" component={App}> // <- it's pointing to app.js pasted below 
    <IndexRoute 
     getComponent={(nextState, cb) => { 
     require.ensure([], require => { 
      cb(null, require('./modules/Main/pages/Main/Main').default); 
     }); 
     }} 
    /> 
    <Route 
     path="posts" 
     getComponent={(nextState, cb) => { 
     require.ensure([], require => { 
      cb(null, require('./modules/Post/pages/PostListPage/PostListPage').default); 
     }); 
     }} 
    /> 
    <Route 
     path="posts/:slug-:cuid" 
     getComponent={(nextState, cb) => { 
     require.ensure([], require => { 
      cb(null, require('./modules/Post/pages/PostDetailPage/PostDetailPage').default); 
     }); 
     }} 
    /> 
    <Route 
     path="screenBuilder" 
     getComponent={(nextState, cb) => { 
     require.ensure([], require => { 
      cb(null, require('./modules/ScreenBuilder/pages/ScreenBuilderPage/ScreenBuilderPage').default); 
     }); 
     }} 
    /> 
    </Route> 

今度はApp.js(クライアント/モジュール/ App/App.js)ですが、今回はルートによって指し示されたモジュールの "contener"要素です:

export class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { isMounted: false }; 
    } 

    componentDidMount() { 
    this.setState({isMounted: true}); // eslint-disable-line 
    } 

    toggleAddPostSection =() => { 
    this.props.dispatch(toggleAddPost()); 
    }; 

    render() { 
    return (
     <div> 
     {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />} 
     <div> 
      // <Helmet/> 
      <Header 
      switchLanguage={lang => 
      this.props.dispatch(switchLanguage(lang))} 
      intl={this.props.intl} 
      toggleAddPost={this.toggleAddPostSection} 
      /> 
      <div className={styles.container}> 
      {this.props.children} 
      </div> 
      <Footer /> 
     </div> 
     </div> 
    ); 
    } 
} 

export default withRouter(connect(mapStateToProps)(App)); 

link要素の例:

<Link to="/posts" >Posts List</Link> 

私は昨日からそれにこだわっていると、現時点では私がどのように修正する考えを持っていません。 IEコンソールにはフィードバックはありません。また、URLを変更する以外にリンクをクリックすると何もしません。

助けていただけたら幸いです!

答えて

2

を含むbabel-polyfill。あなたはまた、他のファイルの上でそれをインポートすることができ

module.exports = { 
    entry: ["babel-polyfill", "./app/js"] 
}; 

のWebPACKために、それはentry設定に追加import "babel-polyfill"が、それは最初に含まれています確認してください。

+1

ああ、まあ、簡単な解決策と魅力のように動作します! ありがとう、マーク! –

関連する問題