ฉันยังใหม่กับ ReactJS และ React-Router ฉันมีส่วนประกอบที่ได้รับผ่านอุปกรณ์ประกอบฉากเป็น<Link/>วัตถุจากตอบสนองเราเตอร์ เมื่อใดก็ตามที่ผู้ใช้คลิกปุ่ม 'ถัดไป' ในส่วนประกอบนี้ฉันต้องการเรียกใช้<Link/>วัตถุด้วยตนเอง

ตอนนี้ฉันใช้refsเพื่อเข้าถึงอินสแตนซ์สำรองและคลิกที่แท็ก 'a' ที่<Link/>สร้างขึ้นด้วยตนเอง

คำถาม:มีวิธีเรียกใช้ Link (เช่นthis.props.next.go) ด้วยตนเองหรือไม่?

นี่คือรหัสปัจจุบันที่ฉันมี:

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

นี่คือรหัสที่ฉันต้องการ:

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

ตอบสนองเราเตอร์ v4 - คอมโพเนนต์การเปลี่ยนเส้นทาง (อัปเดต 2017/04/15)

วิธีที่แนะนำของ v4 คือให้วิธีการแสดงผลของคุณตรวจจับการเปลี่ยนเส้นทาง ใช้สถานะหรืออุปกรณ์ประกอบฉากเพื่อพิจารณาว่าต้องแสดงองค์ประกอบการเปลี่ยนเส้นทางหรือไม่ (ซึ่งจะเป็นการเปลี่ยนเส้นทางของทริกเกอร์)

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

อ้างอิง: https://reacttraining.com/react-router/web/api/Redirect

ตอบสนองเราเตอร์ v4 - บริบทเราเตอร์อ้างอิง

คุณยังสามารถใช้ประโยชน์จากRouterบริบทที่สัมผัสกับคอมโพเนนต์ 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');
}

นี่คือวิธีการ<Redirect />ทำงานภายใต้ประทุน

อ้างอิง: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

ตอบสนองเราเตอร์ v4 - วัตถุประวัติกลายพันธุ์ภายนอก

หากคุณยังต้องทำสิ่งที่คล้ายกับการใช้งานของ v2 คุณสามารถสร้างสำเนาจากBrowserRouterนั้นแสดงhistoryค่าคงที่ที่ส่งออกได้ ด้านล่างนี้เป็นตัวอย่างพื้นฐาน แต่คุณสามารถเขียนเพื่อฉีดเข้ากับอุปกรณ์ประกอบฉากที่ปรับแต่งได้หากจำเป็น มีข้อควรระวังเกี่ยวกับวงจรชีวิต แต่ควรแสดงผล Router เช่นเดียวกับใน v2 สิ่งนี้มีประโยชน์สำหรับการเปลี่ยนเส้นทางหลังจากการร้องขอ API จากฟังก์ชันการดำเนินการ

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

ล่าสุดที่BrowserRouterจะขยาย: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

ตอบสนองเราเตอร์ v2.0

ผลักดันสถานะใหม่ให้กับbrowserHistoryอินสแตนซ์:

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

อ้างอิง: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

React Router 4 ประกอบด้วยwithRouter HOCที่ให้คุณเข้าถึงhistoryวัตถุผ่านทาง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)

ในเวอร์ชัน 5.xคุณสามารถใช้useHistoryhook ของ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

หรือคุณสามารถลองดำเนินการบนคลิกที่นี่ (วิธีแก้ปัญหาที่มีความรุนแรงมากขึ้น):

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

โอเคฉันคิดว่าฉันสามารถหาวิธีแก้ปัญหาที่เหมาะสมได้แล้ว

ตอนนี้แทนที่จะส่ง<Link/>เป็นpropไปยัง Document ฉันจะส่ง<NextLink/>ซึ่งเป็น wrapper ที่กำหนดเองสำหรับลิงก์ react-router ด้วยการทำเช่นนั้นฉันสามารถมีลูกศรขวาเป็นส่วนหนึ่งของโครงสร้างลิงก์ในขณะที่ยังคงหลีกเลี่ยงที่จะมีรหัสเส้นทางภายในวัตถุเอกสาร

รหัสที่อัปเดตมีลักษณะดังนี้:

//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 : ถ้าคุณกำลังใช้เวอร์ชันล่าสุดตอบสนองเตอร์คุณอาจจำเป็นต้องใช้แทนthis.context.router.transitionTo this.context.transitionToรหัสนี้จะใช้ได้ดีสำหรับ react-router เวอร์ชัน 0.12.X.

ตอบสนองเราเตอร์ 4

คุณสามารถเรียกใช้วิธีการพุชผ่านบริบทใน v4:

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

บริบทคือ:

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

อีกครั้งนี่คือ JS :) ยังใช้งานได้ ....

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

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