基本的に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を変更する以外にリンクをクリックすると何もしません。
助けていただけたら幸いです!
ああ、まあ、簡単な解決策と魅力のように動作します! ありがとう、マーク! –