Saya baru mengenal ReactJS dan React-Router. Saya memiliki komponen yang menerima melalui alat peraga <Link/>objek dari react-router . Setiap kali pengguna mengklik tombol 'next' di dalam komponen ini saya ingin memanggil <Link/>objek secara manual.

Saat ini, saya menggunakan referensi untuk mengakses contoh dukungan dan secara manual mengklik tag 'a' yang <Link/>dihasilkan.

Pertanyaan: Apakah ada cara untuk secara manual menjalankan Tautan (mis. this.props.next.go)?

Ini adalah kode saat ini yang saya miliki:

//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>
         ...
      );
   }
});
...

Ini adalah kode yang saya ingin miliki:

//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 - Redirect Component (diperbarui 2017/04/15)

Cara v4 yang disarankan adalah membiarkan metode render Anda menangkap pengalihan. Gunakan status atau properti untuk menentukan apakah komponen pengalihan perlu ditampilkan (yang kemudian memicu pengalihan).

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

Referensi: https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - Konteks Konteks Referensi

Anda juga dapat memanfaatkan Routerkonteks yang terpapar komponen Bereaksi.

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

Beginilah cara <Redirect />kerjanya di bawah tenda.

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

React Router v4 - Mutasi Object History Secara Eksternal

Jika Anda masih perlu melakukan sesuatu yang mirip dengan implementasi v2, Anda dapat membuat salinan BrowserRouterlalu mengeksposnya historysebagai konstanta yang dapat diekspor. Di bawah ini adalah contoh dasar tetapi Anda dapat membuatnya untuk menyuntikkannya dengan alat peraga yang dapat disesuaikan jika diperlukan. Ada peringatan yang dicatat dengan siklus hidup, tetapi itu harus selalu rerender Router, seperti di v2. Ini dapat berguna untuk pengalihan setelah permintaan API dari fungsi tindakan.

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

Terbaru BrowserRouteruntuk memperpanjang: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

Dorong status baru ke browserHistoryinstance:

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

Referensi: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

React Router 4 menyertakan withRouter HOC yang memberi Anda akses ke historyobjek melalui 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)

Di versi 5.x , Anda dapat menggunakan useHistorykait 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

atau Anda bahkan dapat mencoba menjalankan onClick this (solusi yang lebih keras):

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

Ok, saya pikir saya bisa menemukan solusi yang tepat untuk itu.

Sekarang, alih-alih mengirim <Link/>sebagai penyokong ke Dokumen, saya mengirim <NextLink/>yang merupakan pembungkus khusus untuk Tautan router reaksi. Dengan melakukan itu, saya dapat memiliki panah kanan sebagai bagian dari struktur Link sambil tetap menghindari memiliki kode perutean di dalam objek Dokumen.

Kode yang diperbarui terlihat seperti berikut:

//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 : Jika Anda menggunakan versi terbaru dari router reaksi Anda mungkin perlu menggunakan this.context.router.transitionTosebagai gantinya this.context.transitionTo. Kode ini akan berfungsi dengan baik untuk react-router versi 0.12.X.

Bereaksi Router 4

Anda dapat dengan mudah memanggil metode push melalui konteks di v4:

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

dimana konteksnya adalah:

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

sekali lagi ini JS :) ini masih berfungsi ....

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

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