React-Router 5.1.0+ Trả lời (sử dụng hook và React> 16.8)
Bạn có thể sử dụng useHistoryhook mới trên Các thành phần chức năng và điều hướng theo chương trình:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Trả lời
Trong 4.0 trở lên, sử dụng lịch sử làm chỗ dựa cho thành phần của bạn.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
LƯU Ý: this.props.history không tồn tại trong trường hợp thành phần của bạn không được hiển thị bởi <Route>. Bạn nên sử dụng <Route path="..." component={YourComponent}/>để có this.props.history trong YourComponent
React-Router 3.0.0+ Trả lời
Trong 3.0 trở lên, sử dụng bộ định tuyến làm chỗ dựa cho thành phần của bạn.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Trả lời
Trong 2.4 trở lên, sử dụng thành phần bậc cao hơn để lấy bộ định tuyến làm chỗ dựa cho thành phần của bạn.
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+ Trả lời
Phiên bản này tương thích ngược với 1.x nên không cần Hướng dẫn nâng cấp. Chỉ cần đi qua các ví dụ là đủ tốt.
Điều đó nói rằng, nếu bạn muốn chuyển sang mẫu mới, có một mô-đun trình duyệt trong bộ định tuyến mà bạn có thể truy cập
import { browserHistory } from 'react-router'
Bây giờ bạn có quyền truy cập vào lịch sử trình duyệt của mình, vì vậy bạn có thể thực hiện những việc như đẩy, thay thế, v.v ... Giống như:
browserHistory.push('/some/path')
Đọc thêm:
Lịch sử và
điều hướng
React-Router 1.xx Trả lời
Tôi sẽ không đi vào chi tiết nâng cấp. Bạn có thể đọc về điều đó trong Hướng dẫn nâng cấp
Thay đổi chính về câu hỏi ở đây là thay đổi từ Điều hướng mixin sang Lịch sử. Bây giờ, nó đang sử dụng historyAPI của trình duyệt để thay đổi tuyến đường nên chúng tôi sẽ sử dụng pushState()từ bây giờ.
Đây là một ví dụ sử dụng Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Lưu ý rằng điều này Historyđến từ dự án rackt / history . Không phải từ chính React-Router.
Nếu bạn không muốn sử dụng Mixin vì một số lý do (có thể vì lớp ES6), thì bạn có thể truy cập vào lịch sử mà bạn nhận được từ bộ định tuyến từ đó this.props.history. Nó sẽ chỉ có thể truy cập cho các thành phần được kết xuất bởi Bộ định tuyến của bạn. Vì vậy, nếu bạn muốn sử dụng nó trong bất kỳ thành phần con nào, nó cần được truyền lại dưới dạng một thuộc tính thông qua props.
Bạn có thể đọc thêm về bản phát hành mới tại tài liệu 1.0.x của họ
Đây là một trang trợ giúp cụ thể về việc điều hướng bên ngoài thành phần của bạn
Nó khuyên bạn nên lấy một tài liệu tham khảo history = createHistory()và kêu gọi replaceStatevề điều đó.
React-Router 0.13.x Trả lời
Tôi gặp vấn đề tương tự và chỉ có thể tìm ra giải pháp với Mixin điều hướng đi kèm với bộ định tuyến phản ứng.
Đây là cách tôi đã làm nó
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>);
}
});
Tôi đã có thể gọi transitionTo()mà không cần truy cập.context
Hoặc bạn có thể thử ES6 ưa thích 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
};
React-Router-Redux
Lưu ý: nếu bạn đang sử dụng Redux, có một dự án khác có tên
React-Router-Redux cung cấp cho bạn các liên kết redux cho ReactRouter, sử dụng một cách tiếp cận tương tự như
React-Redux thực hiện
React-Router-Redux có một vài phương thức khả dụng cho phép điều hướng đơn giản từ những người tạo hành động bên trong. Chúng có thể đặc biệt hữu ích cho những người có kiến trúc hiện có trong React Native và họ muốn sử dụng các mẫu tương tự trong React Web với chi phí tối thiểu.
Khám phá các phương pháp sau:
push(location)replace(location)go(number)goBack()goForward()
Dưới đây là một ví dụ sử dụng, với 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>