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()

Question 9

간단히 사용

<span onClick={() => this.props.history.goBack()}>Back</span>

Question 10

이것이 누군가에게 도움이되기를 바랍니다.

import React from 'react';
import * as History from 'history';
import { withRouter } from 'react-router-dom';

interface Props {
  history: History;
}

@withRouter
export default class YourComponent extends React.PureComponent<Props> {

  private onBackClick = (event: React.MouseEvent): void => {
    const { history } = this.props;
    history.goBack();
  };

...

Question 11

아마도 이것은 누군가를 도울 수 있습니다.

나는 사용하고 있었다 history.replace() 내가 사용하려고 그렇게 할 때, 리디렉션에 history.goBack()내가 작업 한 페이지 이전 이전 페이지로 전송했다. 그래서 방법 history.replace()을로 변경하여 history.push()역사를 저장하고 돌아갈 수 있도록했습니다.

Question 12

다른 사람이이 문제를 겪었는지 아니면 이것을보아야할지 잘 모르겠습니다. 하지만이 문제를 해결하기 위해 약 3 시간을 보냈습니다.

버튼 클릭으로 간단한 goBack ()을 구현하고 싶었습니다. 내 App.js가 이미 라우터에 래핑되어 있고 'react-router-dom'에서 {BrowserRouter as Router}를 가져 왔기 때문에 좋은 시작이라고 생각했습니다. ... Router 요소를 사용하면 내역 개체를 평가할 수 있습니다.

전의:

import React from 'react';
import './App.css';
import Splash from './components/Splash';
import Header from './components/Header.js';
import Footer from './components/Footer';
import Info from './components/Info';
import Timer from './components/Timer';
import Options from './components/Options';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Header />
      <Route path='/' component={Splash} exact />
      <Route path='/home' component={Info} exact />
      <Route path='/timer' component={Timer} exact />
      <Route path='/options' component={Options} exact />
      <Footer />
    </Router>
  );
}
export default App;

하지만 문제는 내 Nav (하위 구성 요소) 모듈에 있었기 때문에 'react-router-dom'에서 {withRouter}를 가져와야했습니다. ' 그런 다음 다음을 사용하여 내보내기를 수행하십시오.

export default withRouter(Nav);

전의:

import React from 'react';
import { withRouter } from 'react-router-dom';
class Nav extends React.Component {
    render() {
        return (
            <div>
                <label htmlFor='back'></label>
                <button id='back' onClick={ () => this.props.history.goBack() }>Back</button>
                <label htmlFor='logOut'></label>
                <button id='logOut' ><a href='./'>Log-Out</a>            
</button>
            </div>
        );
    }
}
export default withRouter(Nav);

요약하면 withRouter는 React의 알려진 문제로 인해 생성되었습니다. 특정 시나리오에서 라우터로부터 상속이 거부되는 경우 강제 내보내기가 필요합니다.