react-router (v4) làm cách nào để quay lại?

Đang cố gắng tìm ra cách tôi có thể quay lại trang trước. tôi đang dùng[react-router-v4][1]

Đây là mã tôi đã định cấu hình trong trang đích đầu tiên của mình:

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

Để chuyển tiếp đến các trang tiếp theo, tôi chỉ cần thực hiện:

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

Tuy nhiên, làm cách nào để quay lại trang trước? Đã thử một số điều như được đề cập bên dưới nhưng không may mắn: 1.this.props.history.goBack();

Đưa ra lỗi:

TypeError: null không phải là một đối tượng (đánh giá 'this.props')

2. this.context.router.goBack();

Đưa ra lỗi:

TypeError: null không phải là một đối tượng (đánh giá 'this.context')

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

Đưa ra lỗi:

TypeError: null không phải là một đối tượng (đánh giá 'this.props')

Đăng Page1mã ở đây bên dưới:

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;

Tôi nghĩ rằng vấn đề là với sự ràng buộc:

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>

Như tôi đã giả định trước khi bạn đăng mã:

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

this.props.history.goBack();

Đây là giải pháp chính xác cho react-router v4

Nhưng có một điều bạn cần lưu ý là bạn cần đảm bảo rằng this.props.history đã tồn tại.

Điều đó có nghĩa là bạn cần gọi hàm này this.props.history.goBack();bên trong thành phần được bao bọc bởi <Route />

Nếu bạn gọi hàm này trong một thành phần nằm sâu hơn trong cây thành phần, nó sẽ không hoạt động.

BIÊN TẬP:

Nếu bạn muốn có đối tượng lịch sử trong thành phần nằm sâu hơn trong cây thành phần (không được bao bọc bởi <Route>), bạn có thể làm như sau:

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

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

export default withRouter(Demo);

Để sử dụng với React Router v4 và một thành phần chức năng ở bất kỳ đâu trong cây dom.

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

Mỗi câu trả lời ở đây có các phần của giải pháp tổng thể. Đây là giải pháp hoàn chỉnh mà tôi đã sử dụng để làm cho nó hoạt động bên trong các thành phần sâu hơn so với nơi Route được sử dụng:

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

^ Bạn cần dòng thứ hai để nhập hàm và xuất thành phần ở cuối trang.

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

^ Yêu cầu hàm mũi tên so với onClick = {this.props.history.goBack ()}

export default withRouter(MyPage)

^ bọc tên thành phần của bạn bằng 'withRouter ()'

Bạn có thể cung cấp mã nơi bạn sử dụng this.props.history.push('/Page2');không?

Bạn đã thử phương thức goBack () chưa?

this.props.history.goBack();

Nó được liệt kê ở đây https://reacttraining.com/react-router/web/api/history

Với ví dụ trực tiếp tại đây https://reacttraining.com/react-router/web/example/modal-gallery

Đây là cách sạch sẽ và đơn giản nhất mà bạn có thể xử lý vấn đề này, cách này cũng vô hiệu hóa các cạm bẫy có thể xảy ra của this keyword. Sử dụng các thành phần chức năng:

import { withRouter } from "react-router-dom"; bọc của bạn componenthoặc tốt hơn App.jsvới withRouter() HOCđiều này làm historycho khả dụng "toàn ứng dụng". gói thành phần của bạn chỉ làm cho history available for that specificthành phần là lựa chọn của bạn.

Vì vậy, bạn có:

1. export default withRouter(App);

2. Trong môi trường Redux, export default withRouter( connect(mapStateToProps, { <!-- your action creators -->})(App), );bạn thậm chí có thể sử dụng historytừ những người tạo hành động của mình theo cách này.

trong việc componentlàm của bạn như sau:

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 useHistorychỉ được xuất từ ​​v5.1 mới nhất react-router-domnên hãy nhớ cập nhật gói. Tuy nhiên, bạn không cần phải lo lắng. về nhiều lỗi của this keyword.

Bạn cũng có thể biến đây thành một thành phần có thể tái sử dụng để sử dụng trên ứng dụng của mình.

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

Thử:

this.props.router.goBack()

Đơn giản chỉ cần sử dụng

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

Hy vọng điều này sẽ giúp ai đó:

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

...

Có lẽ điều này có thể giúp ai đó.

Tôi đang sử dụng history.replace()để chuyển hướng, vì vậy khi tôi cố gắng sử dụng history.goBack(), tôi đã được chuyển đến trang trước trước trang mà tôi đang làm việc. Vì vậy, tôi đã thay đổi phương thức history.replace()thành history.push()để lịch sử có thể được lưu và tôi có thể quay lại.

Tôi không chắc liệu có ai khác gặp phải sự cố này hoặc có thể cần phải xem điều này. Nhưng tôi đã dành khoảng 3 giờ để giải quyết vấn đề này:

Tôi muốn triển khai một goBack () đơn giản khi nhấp vào một nút. Tôi nghĩ rằng tôi đã có một khởi đầu tốt vì App.js của tôi đã được bao bọc trong Bộ định tuyến và tôi đang nhập {BrowserRouter dưới dạng Bộ định tuyến} từ 'react-router-dom'; ... Vì phần tử Bộ định tuyến cho phép tôi đánh giá đối tượng lịch sử.

Ví dụ:

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;

NHƯNG vấn đề là trên mô-đun Nav (một thành phần con) của tôi, tôi phải 'nhập {withRouter} từ' react-router-dom ';' và sau đó buộc xuất với:

export default withRouter(Nav);

Ví dụ:

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

tóm lại, withRouter được tạo ra do một vấn đề đã biết trong React, trong đó trong một số trường hợp nhất định khi kế thừa từ bộ định tuyến bị từ chối, việc xuất bắt buộc là cần thiết.