Как заставить кнопки «назад» и «вперед» веб-браузера отслеживать путь моих внутренних компонентов и соответственно перемещаться в reactJs - PullRequest
Новая
       44

Как заставить кнопки «назад» и «вперед» веб-браузера отслеживать путь моих внутренних компонентов и соответственно перемещаться в reactJs

1 голос
/ 05 марта 2020

Ниже приведено объяснение моего кода

У меня многошаговое приложение, в котором у меня есть stepA и stepB

stepA имеет 3 подшага

stepB имеет 2 подшага

stepA и stepB имеют свои отдельные маршруты что-то вроде ниже

file - маршрутизаторы. js

<Route path={`/step-a`} render={()=><StepA history={this.props.history}/>} />
<Route path={`/step-b`} render={()=><StepB history={this.props.history}/>} />

main. js

import Routers from './routers';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory({ forceRefresh: true });

ReactDOM.render(<Routers history={history} />, document.getElementById('root'));

Внутренний шаг выполняет рендеринг и не имеет собственных маршрутов

StepA. js

componentDidMount(){
let selfThis = this;
 window.addEventListener('popstate', function(popStateEvent){
      if(popStateEvent.state){
        if(popStateEvent.state.state){
          selfThis.setState({current:popStateEvent.state.state});
        }
      }
    })
}

changeRoute(){
let current = this.state.current;

if(current <= 3){
  this.setState((prevState)=>({current: prevState.current+1}),()=>
  this.props.history.push({state: this.state.current})
 );
 }else{
   this.props.history.push('/step-b');
 }
}

render(){

const {current} = this.state;

 if(current===1){
   return(<div>This is Step A substep 1 <button 
 type="button" onClick={this.changeRoute}>Next</button></div>)
 }
 else if(current === 2){
   return(<div>This is Step A substep 2 </div>)
 }else {
   return(<div>This is Step A substep 3 </div>)
 }

}

Чего я ожидал

Я просто хочу, чтобы мой браузер заставлял свои кнопки «назад» и «вперед» отслеживать путь моих внутренних компонентов, то есть StepA substep 1> StepA substep 2 и перемещайтесь соответственно

Если я нажму кнопку «Далее» и окажусь на шаге StepA 1, тогда я должен go на шаге StepA 2, а не stepB напрямую.

Примечание - The Приведенный выше код может содержать ошибки, так как я написал код fre sh, а не оригинальный.

В чем проблема Во время ча При переходе от шага A subtep3 к stepB subtep1 возникает проблема, когда я нажимаю кнопку «Назад» или «Вперед» браузера, тогда в этом случае эта функция не работает должным образом, и я думаю, что это, возможно, проблема, связанная с другим history.pu sh ('/ step-b'), но я не могу ее решить.

...