Tôi mới biết về ReactJS và React-Router. Tôi có một thành phần nhận thông qua đạo cụ một <Link/>đối tượng từ bộ định tuyến phản ứng . Bất cứ khi nào người dùng nhấp vào nút 'tiếp theo' bên trong thành phần này, tôi muốn gọi <Link/>đối tượng theo cách thủ công.

Ngay bây giờ, tôi đang sử dụng ref để truy cập vào thể hiện sao lưu và nhấp thủ công vào thẻ 'a' <Link/>tạo ra.

Câu hỏi: Có cách nào để gọi Liên kết thủ công (ví dụ this.props.next.go) không?

Đây là mã hiện tại tôi có:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

Đây là mã tôi muốn có:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
         ...
      );
   }
});
...

React Router v4 - Thành phần chuyển hướng (cập nhật 2017/04/15)

Cách v4 được đề xuất là cho phép phương thức kết xuất của bạn bắt được chuyển hướng. Sử dụng trạng thái hoặc đạo cụ để xác định xem thành phần chuyển hướng có cần được hiển thị không (sau đó kích hoạt chuyển hướng).

import { Redirect } from 'react-router';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

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

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

Tham khảo: https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - Bối cảnh bộ định tuyến tham chiếu

Bạn cũng có thể tận dụng Routerbối cảnh tiếp xúc với thành phần React.

static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}

Đây là cách làm <Redirect />việc dưới mui xe.

Tham khảo: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4 - Đối tượng lịch sử đột biến bên ngoài

Nếu bạn vẫn cần phải làm một cái gì đó tương tự như triển khai của v2, bạn có thể tạo một bản sao BrowserRoutersau đó hiển thị historydưới dạng hằng số có thể xuất. Dưới đây là một ví dụ cơ bản nhưng bạn có thể soạn nó để tiêm nó với các đạo cụ tùy biến nếu cần. Có những lưu ý cần chú ý với vòng đời, nhưng nó phải luôn luôn chạy lại Router, giống như trong v2. Điều này có thể hữu ích cho các chuyển hướng sau khi yêu cầu API từ một chức năng hành động.

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');

Mới nhất BrowserRouterđể gia hạn: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

Bộ định tuyến phản ứng v2

Đẩy một trạng thái mới vào browserHistorythể hiện:

import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');

Tham khảo: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

React Router 4 bao gồm withRouter HOC cho phép bạn truy cập vào historyđối tượng thông qua this.props:

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

class Foo extends Component {
  constructor(props) {
    super(props)

    this.goHome = this.goHome.bind(this)
  }

  goHome() {
    this.props.history.push('/')
  }

  render() {
    <div className="foo">
      <button onClick={this.goHome} />
    </div>
  }
}

export default withRouter(Foo)

Trong phiên bản 5.x , bạn có thể sử dụng useHistoryhook của react-router-dom:

// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50

hoặc thậm chí bạn có thể thử thực hiện onClick này (giải pháp bạo lực hơn):

window.location.assign("/sample");

Ok, tôi nghĩ rằng tôi đã có thể tìm ra một giải pháp thích hợp cho điều đó.

Bây giờ, thay vì gửi <Link/>dưới dạng prop đến Document, tôi gửi<NextLink/> đó là một trình bao bọc tùy chỉnh cho Liên kết bộ định tuyến phản ứng. Bằng cách đó, tôi có thể có mũi tên bên phải như một phần của cấu trúc Liên kết trong khi vẫn tránh để có mã định tuyến bên trong đối tượng Tài liệu.

Mã cập nhật trông như sau:

//in NextLink.js
var React = require('react');
var Right = require('./Right');

var NextLink = React.createClass({
    propTypes: {
        link: React.PropTypes.node.isRequired
    },

    contextTypes: {
        transitionTo: React.PropTypes.func.isRequired
    },

    _onClickRight: function() {
        this.context.transitionTo(this.props.link.props.to);
    },

    render: function() {
        return (
            <div>
                {this.props.link}
                <Right onClick={this._onClickRight} />
            </div>  
        );
    }
});

module.exports = NextLink;

...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div>{this.props.next}</div>
         ...
      );
   }
});
...

PS : Nếu bạn đang sử dụng phiên bản mới nhất của bộ định tuyến phản ứng, bạn có thể cần phải sử dụng this.context.router.transitionTothay vì this.context.transitionTo. Mã này sẽ hoạt động tốt cho phiên bản bộ định tuyến phản ứng 0.12.X.

Bộ định tuyến phản ứng 4

Bạn có thể dễ dàng gọi phương thức đẩy qua ngữ cảnh trong v4:

this.context.router.push(this.props.exitPath);

bối cảnh là:

static contextTypes = {
    router: React.PropTypes.object,
};

một lần nữa đây là JS :) cái này vẫn hoạt động ....

var linkToClick = document.getElementById('something');
linkToClick.click();

<Link id="something" to={/somewhaere}> the link </Link>