React 路由器更改 url 但不更改视图（仅在 Internet Explorer 11 上）

Question

基本上在 Chrome 和 Firefox 中一切正常，但在 IE 上单击 Link 元素后只有 URL 发生变化，而不是视图。我知道 react-router 中的 Update Blocking 问题，但我认为情况并非如此——我很难过，它只在 IE 上失败。

这是我的堆栈 (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 (client/modules/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 控制台中没有反馈，也没有发出请求...单击 link 除了更改 URL 外什么也没做。

如有任何帮助，我们将不胜感激！

Answer 1

包括 babel-polyfill.

对于 Webpack，将其添加到 entry 配置中：

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

您也可以将它导入到其他文件的顶部：import "babel-polyfill"，但请确保先包含它。

React 路由器更改 url 但不更改视图（仅在 Internet Explorer 11 上）

React router changes url but not the view (only on Internet Explorer 11)

internet-explorer

reactjs

react-router

react-redux

mern