基本上,在 Chrome 和 Firefox 中一切正常,但在 IE 上单击链接元素后,只有 URL 发生变化,而不是 View 发生变化。我知道Update Blocking React-router 中的问题,但我认为事实并非如此 - 正如我所悲伤的那样,它仅在 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>
);
}
路由.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 to="/posts" >Posts List</Link>
从昨天开始我就一直坚持这个问题,目前我不知道如何解决这个问题。 IE 控制台没有任何反馈,也没有发出任何请求...单击链接除了更改 URL 之外没有任何作用。
如有任何帮助,我们将不胜感激!
最佳答案
包括babel-polyfill
.
对于 Webpack,将其添加到 entry
配置中:
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
您还可以将其导入到其他文件的顶部:导入“babel-polyfill”
,但请确保首先包含它。
关于reactjs - React 路由器更改 url 但不更改 View (仅在 Internet Explorer 11 上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45034968/