React-Router 5.1.0+คำตอบ (ใช้ hooks และ React> 16.8)
คุณสามารถใช้useHistory
เบ็ดใหม่บนส่วนประกอบการทำงานและการนำทางโดยทางโปรแกรม:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+คำตอบ
ใน 4.0 ขึ้นไปให้ใช้ประวัติเป็นเสาของส่วนประกอบของคุณ
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
หมายเหตุ: this.props.history <Route>
ไม่ได้อยู่ในกรณีที่ส่วนประกอบของคุณไม่ได้แสดงโดย คุณควรใช้<Route path="..." component={YourComponent}/>
เพื่อรับ this.props.history ใน YourComponent
React-Router 3.0.0+คำตอบ
ใน 3.0 ขึ้นไปให้ใช้เราเตอร์เป็นอุปกรณ์ของคุณ
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+คำตอบ
ใน 2.4 และสูงกว่าให้ใช้ส่วนประกอบลำดับที่สูงขึ้นเพื่อให้เราเตอร์เป็นเสาของส่วนประกอบของคุณ
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
React-Router 2.0.0+คำตอบ
รุ่นนี้สามารถใช้งานร่วมกับ 1.x ได้ไม่จำเป็นต้องมีคำแนะนำในการอัพเกรด แค่ผ่านตัวอย่างควรจะดีพอ
ที่กล่าวว่าหากคุณต้องการเปลี่ยนเป็นรูปแบบใหม่มีเบราว์เซอร์โมดูลประวัติภายในเราเตอร์ที่คุณสามารถเข้าถึงได้
import { browserHistory } from 'react-router'
ตอนนี้คุณสามารถเข้าถึงประวัติเบราว์เซอร์ของคุณเพื่อให้คุณสามารถทำสิ่งต่างๆเช่นพุช, แทนที่, ฯลฯ ... กดไลค์:
browserHistory.push('/some/path')
อ่านเพิ่มเติม:
ประวัติศาสตร์และ
การนำทาง
React-Router 1.xxคำตอบ
ฉันจะไม่เข้าไปดูรายละเอียดการอัพเกรด คุณสามารถอ่านเกี่ยวกับเรื่องนั้นได้ในคำแนะนำในการอัพเกรด
การเปลี่ยนแปลงหลักเกี่ยวกับคำถามที่นี่คือการเปลี่ยนแปลงจาก Navigation mixin เป็น History ตอนนี้มันกำลังใช้ประวัติเบราว์เซอร์ API เพื่อเปลี่ยนเส้นทางดังนั้นเราจะใช้ต่อpushState()
จากนี้ไป
นี่เป็นตัวอย่างการใช้ Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
โปรดทราบว่าสิ่งนี้History
มาจากโครงการแร็ค / ประวัติ ไม่ได้มาจาก React-Router
หากคุณไม่ต้องการที่จะใช้ Mixin ด้วยเหตุผลบางอย่าง (อาจจะเพราะของชั้น ES6) this.props.history
แล้วคุณสามารถเข้าถึงประวัติศาสตร์ที่คุณได้รับจากเราเตอร์จาก มันจะเข้าถึงได้เฉพาะสำหรับส่วนประกอบที่เราเตอร์ของคุณแสดงผล ดังนั้นถ้าคุณต้องการที่จะใช้ในส่วนเด็ก ๆ props
จะต้องมีการส่งผ่านลงมาเป็นแอตทริบิวต์ผ่าน
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับรีลีสใหม่ได้ที่เอกสารคู่มือ1.0.x
นี่คือหน้าความช่วยเหลือเกี่ยวกับการนำทางนอกส่วนประกอบของคุณโดยเฉพาะ
มันแนะนำให้คว้าการอ้างอิงhistory = createHistory()
และเรียกreplaceState
สิ่งนั้น
React-Router 0.13.xคำตอบ
ฉันเจอปัญหาเดียวกันและหาวิธีแก้ปัญหาด้วย Navigation mixin ที่มาพร้อมกับ react-router
นี่เป็นวิธีที่ฉันทำ
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
ฉันสามารถโทรได้transitionTo()
โดยไม่จำเป็นต้องเข้าถึง.context
หรือคุณอาจลองใช้ ES6 แฟนซี class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
ตอบสนอง-Router-Redux
หมายเหตุ:หากคุณกำลังใช้ Redux มีอีกโครงการที่เรียกว่า
React-Router-Reduxที่ให้การเชื่อม Redux สำหรับ ReactRouter โดยใช้วิธีการเดียวกับที่
React-Reduxทำ
React-Router-Redux มีวิธีการไม่กี่วิธีที่ช่วยให้การนำทางอย่างง่ายจากผู้สร้างแอ็คชั่นภายใน สิ่งเหล่านี้มีประโยชน์อย่างยิ่งสำหรับผู้ที่มีสถาปัตยกรรมที่มีอยู่ใน React Native และพวกเขาต้องการใช้รูปแบบเดียวกันใน React Web ด้วยค่าใช้จ่ายที่น้อยที่สุด
สำรวจวิธีการต่อไปนี้:
push(location)
replace(location)
go(number)
goBack()
goForward()
นี่คือตัวอย่างการใช้งานด้วยRedux-Thunk :
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>