history.pushStateは、インタラクションなしで実行するとiOSのChromeで動作しません。

Question

touch/clickのやりとりをせずに手動で実行すると、history.pushStateがiOSのChromeで動作していないようです。

なぜiOS Chromeがこれを行うのか、またできるだけそれを修正する方法を理解するのに助けが必要です。ここ

https://codepen.io/grymer/pen/OOmebv

最小実施例とcodepenあります。 これをテストするには、ペンをフォークして、iOSデバイスのChromeでデバッグビューに移動する必要があります。

その後、あなたはあなたがこの動作は他のブラウザとは異なりいることがわかります。。 『Bへ「というボタン』を参照してください。それを押してから戻ってブラウザを使用します。

var React, { Component } = React; 
var { BrowserRouter, Redirect, Route, Switch } = ReactRouterDOM; 

class App extends Component { 
    render() { 
    return (
     <BrowserRouter basename={location.href}> 
     <Switch> 
      <Route path="/b" component={B} /> 
      <Route component={A} /> 
     </Switch> 
     </BrowserRouter> 
    ); 
    } 
} 

class A extends Component { 
    constructor() { 
    super(); 

    this.state = {}; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    render() { 
    if(this.state.redirect) { 
     return <Redirect push to="/b" /> 
    } 

    return (
     <div> 
     On page A 
     <button onClick={this.handleClick}>To B</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.setState({ redirect: true }); 
    } 
} 

class B extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     showModal: false 
    }; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    componentDidMount() { 
    this.button.click(); // comment this line to manually open the modal by tapping the button 
    } 

    render() { 
    return (
     <div> 
     On page B 
     { this.state.showModal ? <Modal history={this.props.history} onClose={() => this.setState({ showModal: false }) } /> : null } 
     <button ref={(el) => this.button = el } onClick={this.handleClick}>Open modal</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.setState({ 
     showModal: true 
    }); 
    } 
} 

class Modal extends Component { 
    constructor() { 
    super(); 

    this.handleClick = this.handleClick.bind(this); 
    this.onPopState = this.onPopState.bind(this); 
    } 

    componentDidMount() { 
    this.props.history.push(this.props.history.location.pathname, { type: 'modal' }); 
    window.addEventListener('popstate', this.onPopState); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('popstate', this.onPopState); 
    } 

    render() { 
    return (
     <div> 
     Modal is opened 
     <button onClick={this.handleClick}>Close modal</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.props.onClose(); 
    this.props.history.goBack(); 
    } 

    onPopState() { 
    this.props.onClose(); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('react-container')); 

Answer 1

クロムチームは認めていると彼らは修正に取り組んでいます。

https://bugs.chromium.org/p/chromium/issues/detail?id=783382#c3