[javascript] react-router (v4) 돌아가는 방법?

Question 1

이전 페이지로 돌아가는 방법을 알아 내려고합니다. 나는 사용하고있다[react-router-v4][1]

다음은 첫 번째 방문 페이지에서 구성한 코드입니다.

<Router>
  <div>
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
    <Route exact path="/" component={Page1}/>
    <Route path="/Page2" component={Page2}/>
    <Route path="/Page3" component={Page3}/>
  </div>
</Router>

다음 페이지로 이동하려면 다음을 수행합니다.

this.props.history.push('/Page2');

그러나 이전 페이지로 돌아가려면 어떻게해야합니까? 아래에 언급 된 것과 같은 몇 가지를 시도했지만 운이 없었습니다.this.props.history.goBack();

오류를 제공합니다.

TypeError : null은 객체가 아닙니다 ( ‘this.props’평가).

this.context.router.goBack();

오류를 제공합니다.

TypeError : null은 객체가 아닙니다 ( ‘this.context’평가).

this.props.history.push('/');

오류를 제공합니다.

TypeError : null은 객체가 아닙니다 ( ‘this.props’평가).

Page1아래에 코드를 게시 하십시오.

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
  }


  handleNext() {
    this.props.history.push('/page2');
  }

  handleBack() {
    this.props.history.push('/');
  }


  /*
   * Main render method of this class
   */
  render() {
    return (
      <div>
        {/* some component code */}


        <div className="navigationButtonsLeft">
          <Button onClick={this.handleBack} bsStyle="success">&lt; Back</Button>
        </div>
        <div className="navigationButtonsRight">
          <Button onClick={this.handleNext} bsStyle="success">Next &gt;</Button>
        </div>

      </div>
    );
  }


export default Page1;

Question 2

문제는 바인딩에 있다고 생각합니다.

constructor(props){
   super(props);
   this.goBack = this.goBack.bind(this); // i think you are missing this
}

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

.....

<button onClick={this.goBack}>Go Back</button>

코드를 게시하기 전에 가정했듯이 :

constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
    this.handleBack = this.handleBack.bind(this); // you are missing this line
}

Question 3

this.props.history.goBack();

이것은 react-router v4의 올바른 솔루션입니다.

그러나 명심해야 할 한 가지는 this.props.history가 존재하는지 확인해야한다는 것입니다.

즉 this.props.history.goBack();, <Route />로 래핑 된 구성 요소 내부 에서이 함수를 호출해야합니다.

구성 요소 트리에서 더 깊은 구성 요소에서이 함수를 호출하면 작동하지 않습니다.

편집하다:

구성 요소 트리에서 더 깊은 구성 요소 (<Route>로 래핑되지 않음)에 히스토리 개체를 포함하려면 다음과 같이 할 수 있습니다.

...
import {withRouter} from 'react-router-dom';

class Demo extends Component {
    ...
    // Inside this you can use this.props.history.goBack();
}

export default withRouter(Demo);

Question 4

React Router v4 및 dom-tree의 모든 기능 구성 요소와 함께 사용합니다.

import React from 'react';
import { withRouter } from 'react-router-dom';

const GoBack = ({ history }) => <img src="./images/back.png" onClick={() => history.goBack()} alt="Go back" />;

export default withRouter(GoBack);

Question 5

여기의 각 답변에는 전체 솔루션의 일부가 있습니다. 다음은 Route가 사용 된 곳보다 더 깊은 구성 요소 내부에서 작동하도록하는 데 사용한 완전한 솔루션입니다.

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

^ 함수를 가져오고 페이지 하단에 컴포넌트를 내보내려면 두 번째 줄이 필요합니다.

render() {
  return (
  ...
    <div onClick={() => this.props.history.goBack()}>GO BACK</div>
  )
}

^ 화살표 함수가 필요함 vs 단순히 onClick = {this.props.history.goBack ()}

export default withRouter(MyPage)

^ 구성 요소 이름을 ‘withRouter ()’로 감 쌉니다.

Question 6

사용하는 곳에 코드를 제공 할 수 있습니까 this.props.history.push('/Page2');?

goBack () 메서드를 사용해 보셨습니까?

this.props.history.goBack();

여기에 나열되어 있습니다. https://reacttraining.com/react-router/web/api/history

여기에 라이브 예제가 있습니다. https://reacttraining.com/react-router/web/example/modal-gallery

Question 7

다음은이 문제를 처리 할 수있는 가장 깨끗하고 간단한 방법이며 this keyword. 기능적 구성 요소 사용 :

import { withRouter } from "react-router-dom";
당신의 포장 component또는 더 나은 App.js에 withRouter() HOC이 차종은 history“응용 프로그램 전체”사용할 수. 구성 요소를 감싸는 것만으로 history available for that specific구성 요소“`를 선택할 수 있습니다.

그래서 당신은 :

export default withRouter(App);
Redux 환경에서는 이러한 방식으로 액션 생성자로부터 export default withRouter( connect(mapStateToProps, { })(App), );사용자 history를 사용할 수 있어야합니다 .

당신의 component다음을 수행 :

import {useHistory} from react-router-dom;

const history = useHistory(); // do this inside the component

goBack = () => history.goBack();

<btn btn-sm btn-primary onclick={goBack}>Go Back</btn>

export default DemoComponent;

Gottcha useHistory는 최신 v5.1에서만 내보내 react-router-dom지므로 패키지를 업데이트해야합니다. 그러나 걱정할 필요는 없습니다. 의 많은 걸림돌에 대해 this keyword.

이 구성 요소를 재사용 가능한 구성 요소로 만들어 앱 전체에서 사용할 수도 있습니다.


function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}```
Cheers.

Question 8

시험:

this.props.router.goBack()